search

SortableJS / Vue.Draggable

Vue drag-and-drop component based on Sortable.js
https://sortablejs.github.io/Vue.Draggable/
MIT License
20.09k stars 2.89k forks source link

Indices are incorrectly calculated when using v-ifs inside a template #1157

Open thomasdeanwhite opened 2 years ago

thomasdeanwhite commented 2 years ago

Jsfiddle link

https://codesandbox.io/s/draggable-user-cards-with-vue-js-and-tailwind-forked-0bhbkq?file=/src/App.vue

Step by step scenario

When using draggable, there is a strange interaction if using with elements containing v-ifs. In the example above, there can only ever be one element on the screen at the highest level of the draggable, because both other elements are set to v-if="false". However, dragging the top element to past the first three insides will return a futureIndex value of 0, and dragging one of the bottom two elements will return a high index (e.g., 8 when only 5 elements exist) and no element in the :move event.

Actual Behaviour

The hidden v-if elements are being taken into consideration when dragging elements. These appear in the DOM as <!---->

Expected Behaviour

The hidden v-if elements are ignored when dragging elements

GoldraK commented 1 year ago

I have the same problem.

Some idea?

emersonthis commented 1 year ago

Same problem. My quick workaround was to wrap the template in a div.