DataTable: Reorder (Drag and Drop) not working on touch device.

[Boldonglen]

Describe the bug

When trying to reorder the DataTable on a touch device (i.e. mobile or tablet) the drag and drop functionality does not work. I have found a few other GitHub issues describing the issue with no fix.

To replicate this issue you just need to use a mobile device (or your browsers mobile emulator) and try to drag and drop a reorderable column or row inside a DataTable. This can even be seen in the examples within the official documentation. https://primevue.org/datatable/#reorder

This seems to be the case on all browsers I have tried.

This issue has been raised multiple times with no resolution: https://github.com/primefaces/primevue/issues/3700 https://github.com/primefaces/primevue/issues/1543

Reproducer

https://primevue.org/datatable/#reorder

PrimeVue version

3.52.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Go to https://primevue.org/datatable/#reorder on a touch device (or in dev tools mobile emulator). Touch one of the draggable parts of the Data Table Try and drag the Column or Row The Column or Row is not draggable

Expected behavior

When the orderable item is pressed and held the item should be dragggable.

[1Map]

@Boldonglen Yes, also find this not working on my side. Even on the column resize:

https://primevue.org/datatable/#column_resize

[rzam]

I've done some poking around and testing and it seems that the issue is that the dragstart DOM event (specifically this) simply does not fire on mobile; I haven't tried the other drag* events but I imagine it's the same.

Judging from the threads on StackOverflow it seems to be a semi-common/known issue, but the "usual" fixes (touch-action: none and messing with the scrolling) don't seem to have any effect. It doesn't seem to be an issue specific to tables, I couldn't get it to fire on any DOM element, even simple <div>s.

I've also done some tests with a polyfill that kind of works, except it messes with the table layout and it also requires the draggable attribute to be forcefully enabled on the <tr> element via the DataTable passthrough, so it's not really ideal.