Drag&Drop Utility with React Window (virtualized list)

[Youniss]

Hello,

 

I am looking for a library which would allow us to implement a drag and drop reordering of the rows of a virtualized list.

I would like to use the KendoReact Drag&Drop utility, but it seems that `useDraggable` needs a ref as its first argument.

And it seems that this ref should not be unmounted, otherwise it yields an error.

But, in virtualized lists such as `FixedSizeList` from React Window, the components will be automatically unmounted when they are outside the viewed area.

Is it possible to implement the Drag&Drop utility from KendoReact inside a virtualized list, or should we look for another Drag&Drop library which would support this use case?

[Konstantin Dikov]

Hi Youniss,

Thank you for reaching out to us.

If the draggable item is unmounted during the drag&drop, it will indeed throw an error, which means that using useDraggable will be applicable only if the drag&drop occurs within the already rendered items in the virtual list. I have to say that there is no workaround that we can suggest for this scenario and this should be considered a limitation with the Drag&Drop functionality of the KendoReact suite. I believe that the same limitation would be observed if you use the browser's drag&drop functionality with pure JavaScript implementation.

If further questions arise, please do not hesitate to contact us again. 

 

Regards,
Konstantin Dikov
Progress Telerik

[Youniss]

Thank you for your answer!