拖动时在其列表中保持可拖动（react-beautiful-dnd）

Question

如何在进行 dnd 操作时在其原始列表中保持可拖动？例如。我想拖动项目 "copy" 并同时将其保持在原来的位置。在 onDragEnd 之后我可以复制数据，但是在拖动时它看起来不对并且会让用户感到困惑。（在官方列表中没有找到示例）

Answer 1

通过在列表中向下渲染额外的列表项副本（转换关闭）解决。

此示例代码来自文档

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

变成这样

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

注意带有 dnd-copy 的新假拖动时间项目class

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

此解决方案还需要空标签

拖动时在其列表中保持可拖动（react-beautiful-dnd）

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

reactjs

react-beautiful-dnd