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

Question

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

Answer 1

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

此示例代码来自 docs

<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;
}

此解决方案还需要空标签