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

Question

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

Answer 1

通过在列表中向下渲染附加列表项副本（关闭转换）来解决。

此示例代码来自文档

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

变成这样

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

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

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

该解决方案还需要空标签