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

此解决方案也需要空标签