拖动时在其列表中保持可拖动状态（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;
}

此解决方案也需要空标签