如何在Javascript中创建排序、拖放多级列表

How to create Sortable, drag and drop multi-level list in Javascript

本文关键字：拖放多级列表排序创建 Javascript 更新时间：2023-09-26

我正在尝试创建一个可通过拖放进行排序的多级列表。用户可以抓取一个元素并在树中上下移动，或者将其放入其他元素并使其成为子元素。

有现成的JS解决方案吗？jQuery可排序/可拖动功能适用于单级别列表，但适用于嵌套解决方案。

您也可以尝试https://github.com/dbushell/Nestable（演示：http://dbushell.github.io/Nestable/)。

适用于鼠标和触摸，此插件与jQuery和Zepto兼容。

我使用的是johnny的jquery可排序插件，可以在这里找到http://johnny.github.io/jquery-sortable.

它似乎运行得很好。

我还试图让它通过AJAX发送回列表的排序结构。如果您想查看我的工作解决方案，请参阅本主题，因为关于序列化的官方文档似乎有点不令人满意（至少对于嵌套列表）。

希望这会有所帮助。

因此，尽管您可以使用https://github.com/dbushell/Nestable或http://johnny.github.io/jquery-sortable

现在你可能想使用React这样的软件包，这样你就可以使用这样的软件：https://www.npmjs.com/package/react-drag-sortable

尽量不要再把jQuery用于这类事情了。当你拥有拖放界面时，你已经具备了网络应用程序的要素，而不是网页，你走错了方向。

我看到了一个名为react nestable的包，它可以创建嵌套的拖放。我在下面放了一个包的链接-react nestable npm