How to implement an intelligent drag drop (like this) in react? Canvas or non-canvas based approach?

Question

What approach to do intelligent drag drop like this in react? (canvas or non-canvas based approach?). That is to use React (with a library such as React DND) without using cavas, OR move to rendering/drawing this within React using HTML 5 "canvas" (with potentially a library such as "react-konva".

Requirements:

• when dragging the item, the other items behind "move" to calculate and show what the final re-arrangement will look like (if the drag is allowable)

• may be drop points for which move is not allowed so would highlight this as well (e.g. if some other items in the timeline were "locked")

Answer 1

I have checked React DND, react-konva, and others. The issue they use the transform property and that prevents moving the placeholder separately from dragging the item.

So here is the custom implementation: https://codesandbox.io/s/drag-swap-qv6s0x

P.S It is still unfinished (buggy), later I will fix and clean up the code. But for now, I would like to share it, to know is it what you wanted or if I missing something.

Answer 2

Have a look at this online documentation for MDBootstrap:

https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/

Go to "Horizontal example" section, this might be what you are looking for.

Edit: Sadly this is a premium feature :(