Not working with flex direction reverse

[ligne13]

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

[David-Desmaisons]

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?

[ligne13]

Thanks @David-Desmaisons .

1. I've added keys to div. Still not working
2. When the flex direction is row-reverse, when I drag Item C from left to middle position, item C should be swapped with Item B. It does not work.

Fiddle updated : https://jsfiddle.net/djsuperfive/zuLo7p0w/

[ligne13]

@David-Desmaisons this seems to be an issue with Sortable.js : https://github.com/SortableJS/Sortable/issues/1447

[sid3r]

@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.

[simone-baldini]

Any updates?

[Nebula9527]

i have the same problem

[uxeric]

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.