Vuedraggable animation glitch, not working precisely

  laravel, vuedraggable, vuejs2

I have a problem with vue-draggable with elements not going to their precise end element, Here’s a video to demonstrate the problem: https://imgur.com/a/gsv5rDw
As u can see, Sometimes it works; othertimes, it does not.

Cardlist.vue

<template>
    <div class="p-3 w-80 flex-shrink-0 bg-gray-100 rounded">

        <div class="flex justify-between" v-if="editingCardlist === false">
            <div class="text-gray-700 font-semibold font-sans tracking-wide text-sm" @click="startListEditing">{{ listData.title }}</div>
            <div @click="deleteCardlist"
                 class="ml-1 mb-1 px-2 text-xs rounded-md hover:bg-gray-400 cursor-pointer text-gray-500 flex items-center justify-center"
            >
                <div>✖</div>
            </div>
        </div>

        <input
            v-else
            type="text"
            ref="cardTitle"
            class="  rounded-sm border-blue-600 border-2 py-1 mb-1 px-2 outline-none w-full text-gray-800 text-sm"
            placeholder="Enter list title..."
            @keypress.enter="editList"
            @keyup.esc="editingCardlist = false"
            v-model="listData.title"
            v-click-outside="editList"
        />

        <draggable v-bind="dragOptions"  @end="changeOrder" :list="listData.cards" :animation="200" ghost-class="ghost-card" group="cards" :emptyInsertThreshold="500">

                <Card v-for="(card,index) in listData.cards"
                      :key="card.id"
                      :teamId="teamId"
                      :id="card.id"
                      :card="card"
                      :listId="listData.id"
                      class="mt-3 cursor-move"
                      @card-deleted="cardDeleted($event)">
                </Card>

        </draggable>

        <CardAddEditor v-if="editing"
                       v-click-outside="closeCardEditing"
                       @closed="closeCardEditing"
                       :list="listData"
                       @added="cardAdd($event)"
                       @card-deleted="cardDeleted(cardId)">
        </CardAddEditor>
        <CardAddButton v-else @click="editing=true"></CardAddButton>
    </div>
</template>

<script>
//Card imported
import draggable from "vuedraggable";

export default {
    components: { Card, draggable },

    props: ['list'],



    data() {
        return {
            listData: this.list,
            editing: false,
            editingCardlist: false,
        };
    },

    methods: {
        cardAdd (card) {
            //something
        },

        closeCardEditing () {
            this.editing = false;
        },

        editList () {
            //code
        },

        cardDeleted (cardId) {
            //code
        },

        deleteCardlist () {
            //code
        },

        changeOrder(data) {
            console.log('hello');
            this.$emit('sc');
        },

        startListEditing () {
            this.editingCardlist = true;
            this.$nextTick(() => this.$refs.cardTitle.focus());
        },

        closeEditingList () {
            this.editingCardlist = false;
        }
    }
};
</script>

<style scoped>
    .list {
        width: 250px;
        min-width: 250px;
    }

    .ghost-card {
        opacity: 0.5;
        background: #F7FAFC;
        border: 1px solid #4299e1;
    }
</style>

I have omitted some parts of the code as they seem irrelevant to the problem.
Any help would be appreciated. Thanks!

Source: Laravel

Leave a Reply