4

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

Sam
  • 15,254
  • 25
  • 90
  • 145
Greg
  • 34,042
  • 79
  • 253
  • 454
  • 1
    You might want to give `react-grid-layout` a try (https://github.com/react-grid-layout/react-grid-layout). You can define a single row layout and use `static` property for locked items. The library might be too opinionated for your needs but it might just work. – bamse Jun 07 '22 at 07:58

2 Answers2

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.

sultan
  • 4,543
  • 2
  • 24
  • 32
0

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 :(

madmax
  • 61
  • 5