SortableJS / vue.draggable.next

Vue 3 compatible drag-and-drop component based on Sortable.js
https://sortablejs.github.io/vue.draggable.next/#/simple
MIT License
3.91k stars 531 forks source link

transition-group breaks oldIndex and newIndex in end handler #200

Open jangxx opened 1 year ago

jangxx commented 1 year ago

I have a draggable element like this

<draggable
    v-if="currentAvatarData !== null"
    :list="currentAvatarControlsSorted"
    tag="transition-group"
    :animation="200"
    item-key="id"
    handle=".handle"
    @start="handleDragStart"
    @end="handleDragEnd"
>

with a start and end handler which take care of the actual ordering by using the oldIndex and newIndex values from the drag event. The value for list is a computed value that can not be mutated. This works great without the transition group, but as soon as I set tag to "transition-group", the indices become very weird. In a list with 6 items I saw indices like 17 and 13 for example.

My question is now if this is a bug or if I'm doing something wrong and this is intentional behavior.

Tofandel commented 1 year ago

There is a completely undefined behavior with transition groups, I have updated all the dependencies of the repo and it's reflected in the tests, the vnodes in transition group in vue 3 do not have an el for some reason, making the context undefined and the index calculation completely random