javascript - ReactJS 在多个列表之间拖放

标签 javascript html reactjs drag-and-drop jquery-ui-draggable

我一直在搜索一整天,但什么也没找到。所有的 React 库似乎都只在一个独立列表之间排序。

我找到的最接近的是这篇文章:http://rafaelquintanilha.com/sortable-targets-with-react-dnd/

用这个例子:http://rafaelquintanilha.com/apps/sortabletargets/

问题是您必须先将项目拖到另一个列表,然后才能对其进行排序。换句话说,您不能将项目从一个列表拖到另一个列表,也不能将该项目准确地放置在该列表中您想要将其拖到的位置。

有没有你们知道的任何类型的库,或者知道我可以用什么方法来完成这个?

我的工作项目迫切需要此功能。感谢您的帮助

最佳答案

这个库就是你要找的:

https://github.com/atlassian/react-beautiful-dnd

但请注意,它目前不支持虚拟化。 [更新:现在支持虚拟化! 2021 年 7 月]

这是带有源代码的示例:

https://codesandbox.io/s/ql08j35j3q

关于javascript - ReactJS 在多个列表之间拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45112313/

相关文章:

javascript - 如何使用Data-id发送多个Id

css - 简单 div 内的垂直对齐

javascript - 如何在react中使用map方法循环图像?

html - css 网格上没有边距/填充底部?

javascript - Jest 测试为 eventemitter 对象发出事件(express)

php - Ajax 调用不断返回 null

javascript - 将 LeafletJS 与 ReactJS 一起使用时,图 block 排序不正确

javascript - 使用 HTML 或 JavaScript 移动背景

html - 如果我放大,div 容器就会消失

javascript - webpack-dev-server 没有在本地创建 dist 文件夹