"Live Drag" with switch feedback

[severinlandolt]

Hi all! I am wondering what utilities and adapers I can use to get something like this:

CleanShot.2024-05-17.at.23.32.02.mp4

I think is structurally similar to the grid example, but I could not figure out what to change.

I also found this example but it's outdated.

Thanks for any guidance/help!

[SiteAppCreators]

I think this is the intention of the pragmatic drag and drop. There used to be a package called react-beautiful-dnd, but they currently "have no current plans for further feature development or improvements" ( https://github.com/atlassian/react-beautiful-dnd?tab=readme-ov-file#%EF%B8%8F-maintenance--support )

Pragmatic Drag & Drop no longer has this "Live Drag" option, but it does make everything faster

[ampossardt]

I am currently trying to do something similar - unfortunately, there's no out of the box solution for this. However, it's definitely possible to implement manually - in my case, I have a partial tree structure so I'm using attachInstruction from the hitbox optional package to get an instruction for each item, which I use to move items to/from the array and nested arrays.

It's very far from straightforward and some parts I'm still working on, but based on what I've succeeded in doing so far, you need to:

• Build out your list of items based on an array of items (like these widgets)
• Attach an instruction to each, in your case ignoring reparent/make-child operations
• inside onDrag, get the instruction from the source/target data and determine which indices need to be swapped in your array
• perform the swap on the data within onDrag

The main issue that remains at this point is that the data needs to be referenced from the useEffect registering the drag listener, since you may need to swap items multiple times within one 'drag', so you probably need some combination of these things as well for performance reasons:

• Storing the last instruction executed to prevent multiple calls while dragging over an item while the list is re-rendering
• A global store or some reference to this data which can be called synchronously during drag to get the latest data after updates occur
• A flag to determine whether or not animations are occurring within the list, to prevent instructions from modifying the data while it is animating
• an animation library like framer to handle animating the swap between items

Like I said previously, a lot to do to get it to function this way, however I have tried a few different libraries and they all seem to have their pitfalls when it comes to nesting items. In your case, you could probably get away with using a different library which supports re-rendering in real time with animations. For me, I don't have many options, so I'd rather start with a flexible library such as this one and build on top of it to get my desired result. If you're still looking to do this, best of luck.