Dragged rows issue with reactive data

[abliGhtS]

Hi,

I'm using your extension's draggable rows feature and I came across a few issues. The feature does not seem to be working with reactive arrays (ref and reactive), and the list behavior seems unpredictable. I tried bypassing this issue by handling order change manually, but the data in @dragged_row event is incorrectly identifying dragged row.

I created a demo example, with data from the documentation. My only addition is the display of dragged_row and the order of data after each drag event.

stackblitz demo example

Ideally, it would be great if the feature worked correctly with ref arrays and there was no need to manually modify data.

[pratik227]

Hi @abliGhtS ,

It's weird it should work. hmm Need to check bcz this was bug in vue js before not sure.

But I have one workaround for this that will work for now. Need to check the code for more details.

https://stackblitz.com/edit/quasarframework-a69yar?file=src/App.vue

Please let me know if this works.

Thanks, Pratik Patel

[abliGhtS]

Using your workaround, the data seems to be updating but the drag feature behaves unexpectedly. I used your stackblitz (added numbers to names for clarity) to create an example

As you can see, the original order is 1 2 3 4 5. I'm dragging 1 to the bottom, everything looks okay (2 3 4 5 1), but on drop-end, the order changes to 5 2 3 4 1. The data is updated to match what's visible but it's still incorrect behaviour.

[pratik227]

@abliGhtS Oh ok.

Means ? On the drop it actually swap's the value with old_index and new_index

      let tmp = self.data[(event.oldIndex)];
      self.data[(event.oldIndex)] = self.data[(event.newIndex)];
      self.data[(event.newIndex)] = tmp;

it's made that way only

[pratik227]

https://stackblitz.com/edit/quasarframework-a69yar?file=src/App.vue

[abliGhtS]

It indeed seems to be swapping values when using data=ref([]), but it isn't swapping them while using data=[]

I created side by side comparison so you can see the issue better (https://stackblitz.com/edit/quasarframework-ujyqyf?file=src/App.vue) The upper table works on ref values and updates data, but swaps positions and creates a "jump" for the user, where all the rows suddenly move. While the bottom table has a smooth dragging experience but does not update data correctly

The desired solution would be to combine the two: have the extension work on reactive data but move items instead of swapping them.

[pratik227]

Yah strange. But I think as Vue 3 suggestion for reactivity you need to use ref. But in second think without ref it will not update data in parent I think bcz it's not reactive.

[pratik227]

Closing this issue.