Search code examples
reactjsreact-beautiful-dnd

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)

Solution

  • 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