CODEWITHSUNDEEP
reactjsreact-beautiful-dnd
mjollneer
mjollneer

Reputation: 1035

Keep draggable in its list while dragging (react-beautiful-dnd)

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)

Upvotes: 7

Views: 4078

Answers (1)

mjollneer
mjollneer

Reputation: 1035

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

Upvotes: 2

Related Questions