如何在react中实现智能拖放(像这样)？基于画布还是非画布的方法？

Question

什么样的方法来做智能拖拽这样的反应？(基于画布或非画布的方法？)也就是说，使用React (与一个库，如React )，而不使用canvas，或者使用HTML 5“画布”(可能有一个库，例如“React”)来呈现/绘制这个库。

要求：

• 在拖动项目时，“移动”后面的其他项目计算并显示最终的重新排列将是什么样子(如果允许拖动)

。

• 可能是不允许移动的放置点，因此也会突出显示这一点(例如，如果时间线中的其他项目被“锁定”)

​

​

Answer 1

我检查了React DND、react-konva和其他。他们使用transform属性时遇到的问题，该问题阻止将占位符单独移动以避免拖动该项。

下面是自定义实现：https://codesandbox.io/s/drag-swap-qv6s0x

它仍未完成(buggy)，稍后我将修复和清理代码。但是现在，我想分享它，知道它是你想要什么，或者我是否错过了什么。

Answer 2

请看一下MDBootstrap的在线文档：

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

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

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