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

user_173520 0
Viewed 257

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")

enter image description here

react-dragula react-canvas react-dnd react-konva reactjs
2 Answers

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.

user_22368550
user_79021800
Related