React 拖放插件建议

React Drag and Drop plugin suggestion

我正在使用这样的工作模型:

所以在这里,左侧是一个包含列表项的简单列表。 1.这不是可放下的,只能拖动 2.拖拽后,这个列表一直不变

在右侧,拖动的项目将被放置在这里。

  1. 一旦用户从左侧拖动项目,另一侧/右侧应向用户指示他们可以放置的占位符。
  2. 右侧的所有掉落物品都可以在右侧交换。
  3. 右侧区域应包含 bootstrap 行、列功能。

我必须实现类似的东西 https://react-email-editor-demo.netlify.com/

我已经使用过像 react dnd 和 react -beautiful-dnd 这样的 fre react 插件。我不知道使用这两个插件是否可以实现以上几点。

查了很多东西,在react-beautiful-dnd中,我们无法添加自定义占位符。

如有任何帮助,将不胜感激。

React DND is the most popular library. However, it is not impossible to implement your own. Please, have a look on this answer.

我不确定占位符建议位,但 Dragula JS 是一个非常容易用于拖放功能的库。您可以在 github 上查看它,也可以在那里查看演示。

https://github.com/bevacqua/dragula

演示页面 - https://bevacqua.github.io/dragula

希望对您有所帮助。

Here 我为您创建了一个小示例,它试图从您在上面分享的 link 复制占位符行为中的拖动。

请记住,根据您在 accept 数组 useDrop 挂钩中指定的内容,您可以完全自由地创建多少个可投放目标并让它们接受不同类型的物品.

希望对您有所帮助。