The last created element isn't the one I dropped

Question

I have to do a drag and drop program so i use Vue.Draggable but when i drop my element into the second list the last created element on that list isn't the one i dropped but the one who had the value replaced.

So for instance if i have a drop array like that:

var a = [
    {
        name: 'element1'
    },
    {
        name: 'element2'
    },
    ...
]

and I drop an element before the first element of the second list, the last created element will be 'element1' and I need my program to make the last created element the one droped

I don't know how Vue.Draggable does that but when I had programmatically an element somewhere in the second list like so secondList.splice(3, 0, newElement) the last created element is the one i want (newElement)

Here's the code from the first list:

<draggable v-model="blocks" :clone="clone" :options="draggableOptions" @end="reGenerateUuid">
    <block
        v-for="b in blocks"
        :key="b.props.uuid"
        :title="b.title"
        :image="b.image"
        @click.native="addBlock(blocks[key])" />
</draggable>

the second list is a rendered component so I can't share it because it's massive. The second list doesn't use v-model with the draggable component but the list prop, because from what I understood I can't put a v-model on a rendered element in VueJS.

The elements draggable on the second list doesn't have the key prop because I don't want them to regenerate.

Maybe I need to specify how draggable should add the element to the second list?

Does anyone have an idea?

Answer 1

The elements draggable on the second list doesn't have the key prop because i don't want them to regenerate.

You need the key prop. Otherwise Vue doesn't properly keep track of the order of elements.