Implement a sortable grid correctly

[hungify]

Hello there!
pragmatic-reorder.netlify.app

Here’s a simpler version: Repo, but there are some flicker UI issues to address.

What’s the correct way to handle this situation? If anyone has any suggestions, I’d love to hear them! Thank you!

[sno6]

Drive-by comment (was checking the issues while implementing the package).

I had some strange behaviour in React when I didn't return the cleanup function returned from functions such as combine(), monitorForElements(), dropTargetForElements(). Not too familiar with Vue but I imagine it functions similarly.

[hungify]

Issue 1: The onDropTargetChange event executes unnecessarily multiple times.

1. Event Flow:
   • When you drag Item A to the position of Item B, the onDropTargetChange event fires and performs a reorder list
   • After reordering, Items A and B swapped places, but the library detected that their positions had changed relative to each other.
   • Re-trigger enters and leaves events again (A “leaves” B and then “enters” its new position; similarly for B).
2. Consequence:
   • The onDropTargetChange event fires again after the list has already been reordered.

=> Infinity loop: https://github.com/user-attachments/assets/fade32e4-f875-490e-a8d9-5f60669efb77

[hungify]

I discovered the example in the repository and found the hook useSortableField. However, it only reorders items when you drop them, not while dragging. So, there isn’t an out-of-the-box solution for this.