如何在反应中实现智能拖放（像这样）？画布或非画布的方法？答案

【问题标题】：How to implement an intelligent drag drop (like this) in react? Canvas or non-canvas based approach?如何在反应中实现智能拖放（像这样）？画布或非画布的方法？
【发布时间】：2022-06-13 18:02:31
【问题描述】：

什么方法可以在反应中做这样的智能拖放？（基于画布或非画布的方法？）。那就是在不使用 cavas 的情况下使用 React（使用 React DND 等库），或者使用 HTML 5“canvas”（可能使用诸如“react-konva”之类的库）在 React 中渲染/绘制它。

要求：

拖动item时，后面的其他item“move”来计算并显示最终重新安排的样子（如果阻力是允许）
可能是不允许移动的落点，因此会突出显示这也是如此（例如，如果时间线中的某些其他项目被“锁定”）

【问题讨论】：

您可能想试试react-grid-layout (github.com/react-grid-layout/react-grid-layout)。您可以定义单行布局并将static 属性用于锁定项目。该库可能对您的需求过于自以为是，但它可能会起作用。

标签： reactjs react-dnd react-konva react-canvas react-dragula

【解决方案1】：

查看此 MDBootstrap 在线文档：

https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/

转到“水平示例”部分，这可能就是您要查找的内容。

编辑：遗憾的是，这是一项高级功能:(

【讨论】：

【解决方案2】：

我检查了React DND、react-konva 和其他人。他们使用拖动方法或使用transform 属性的问题，这会阻止移动占位符与拖动项目分开。

所以这里是自定义实现：https://codesandbox.io/s/drag-swap-qv6s0x

附言它仍然未完成（错误），稍后我将修复并清理代码。但现在我想分享它，知道是你想要的还是我错过了什么。

【讨论】：