6

How can i keep draggable in it's original list while dnd action in progress? E.g. i want to drag item "copy" and hold it's original where it was at the same time. After onDragEnd i can copy data, but while dragging it looks wrong and can confuse users. (Did not find example in official list)

mjollneer
  • 1,005
  • 2
  • 19
  • 36

1 Answers1

2

Solved by rendering additional list item copy (with transformation turned off) down in list.

This sample code from docs

<Draggable ...> {(provided, snapshot) => ( <MyItemDraggable .../> )} </Draggable>

Become something like this

<Draggable ...> {(provided, snapshot) => ( <> <MyItemDraggable .../>  {snapshot.isDragging ? <MyItemDraggable className={`dnd-copy`} .../> : null} </>)} </Draggable>

Note new fake draging-time item with dnd-copy class

.dnd-copy ~ div {
    transform: none !important;
}

Empty tags are also needed for this solution

mjollneer
  • 1,005
  • 2
  • 19
  • 36
  • The clone and the original item disappears after drop. – melvin Mar 11 '21 at 07:34
  • This answer put me in the direction of a solution. Also found this code sample that was helpful on CodeSandbox: https://codesandbox.io/s/react-beautiful-dnd-copy-and-drag-jkntp?file=/index.js One thing that was messing me up is I was passing all the react dnd props to the `dnd-copy` item, be sure not to do that. – eric Apr 26 '21 at 19:24
  • 2
    saw this sample. it uses pretty old version of react-beautiful-dnd. also it is last version of react-beautiful-dnd suitable for this solution. sure, my solution based on this. – mjollneer Apr 28 '21 at 10:03