Open ligne13 opened 5 years ago
1) The divs in the v-for should be keyed otherwise this won't work, please corrrect this and retest 2) What it is the scenario and the expected result?
Thanks @David-Desmaisons .
Fiddle updated : https://jsfiddle.net/djsuperfive/zuLo7p0w/
@David-Desmaisons this seems to be an issue with Sortable.js : https://github.com/SortableJS/Sortable/issues/1447
@ligne13 here's what I came up with to avoid that situation: instead of using css flex to reorder elements use vue.js computed to reverse the list.
example code:
data() { return { layers: [] // your } }, computed: { layersReverse: { get() { return this.layers.slice().reverse(); }, set(newList) { this.layers = newList.slice().reverse(); } } }
It doesn't resolve the issue but it's working as expected.
Any updates?
i have the same problem
I solved this using computed
's get()
and set()
methods.
const itemsReversed = computed({
get: () => {
return [...items].reverse()
},
set: (updatedItems) => {
items = [...updatedItems].reverse()
}
})
Then simply assign itemsReversed
to the appropriate elements e.g.
<draggable v-model="itemsReversed">
<div v-for="(item, i) in itemsReversed">
{{ item.label }}
</div>
</draggable>
This will display the items in the reversed order, but also update the original array correctly using drag and drop.
Hopefully that helps.
Jsfiddle link
https://jsfiddle.net/djsuperfive/zuLo7p0w/16/
Step by step scenario
The draggable does not work properly when items are displayed within a flex grid using the row-reverse direction.
Is there a way to make it work with flex-direction reversed ?
thanks