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

【问题标题】：Keep draggable in its list while dragging (react-beautiful-dnd)拖动时在其列表中保持可拖动（react-beautiful-dnd）
【发布时间】：2020-04-17 11:03:02
【问题描述】：

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

【问题讨论】：

标签： reactjs react-beautiful-dnd

【解决方案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;
}

此解决方案还需要空标签

【讨论】：

克隆和原物品掉落后消失。
这个答案让我找到了解决方案。还发现此代码示例对 CodeSandbox 很有帮助：codesandbox.io/s/react-beautiful-dnd-copy-and-drag-jkntp?file=/… 让我感到困惑的一件事是我将所有 react dnd 道具传递给 dnd-copy 项目，请务必不要这样做。
看到了这个样本。它使用相当旧版本的 react-beautiful-dnd。它也是适用于此解决方案的 react-beautiful-dnd 的最新版本。当然，我的解决方案基于此。