如何在 Javascript 中创建可排序、拖放的多级列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12283539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create Sortable, drag and drop multi-level list in Javascript
提问by Brenn
I'm trying to create a multi-leveled list that is sortable by drag and drop. The user can grab an element and move it up and down the tree or drop it into other elements and have it become a child.
我正在尝试创建一个可通过拖放进行排序的多级列表。用户可以抓取一个元素并将其在树上上下移动或将其放入其他元素并使其成为子元素。
Are there off the shelf JS solutions? The jQuery sortable/draggable worked fine for a single level list but less so on nested solutions.
有现成的 JS 解决方案吗？jQuery sortable/draggable 适用于单级列表，但不适用于嵌套解决方案。
回答by Fabien Sa
You can also try https://github.com/dbushell/Nestable(demo: http://dbushell.github.io/Nestable/).
您也可以尝试https://github.com/dbushell/Nestable（演示：http: //dbushell.github.io/Nestable/）。
Works with mouse and touch and this plugin is compatible with jQuery and Zepto.
适用于鼠标和触摸，此插件与 jQuery 和 Zepto 兼容。
回答by Michael Kone?ny
I am using johnny's jquery-sortable plugin, which can be found here http://johnny.github.io/jquery-sortable.
我正在使用 johnny 的 jquery-sortable 插件，可以在这里找到http://johnny.github.io/jquery-sortable。
It seems to work pretty well.
它似乎工作得很好。
I was also trying to get it to send back the sorted structure of the list via AJAX. See this topicif you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).
我还试图让它通过 AJAX 发回列表的排序结构。如果您想查看我的工作解决方案，请参阅此主题，因为有关序列化的官方文档似乎有些不尽人意（至少对于嵌套列表而言）。
Hope this is helpful.
希望这是有帮助的。
回答by Brenn
So while you can use https://github.com/dbushell/Nestableor http://johnny.github.io/jquery-sortable
所以虽然你可以使用https://github.com/dbushell/Nestable或http://johnny.github.io/jquery-sortable
You probably want to move to something like React these days so you can use packages like this: https://www.npmjs.com/package/react-drag-sortable
这些天你可能想转向像 React 这样的东西，这样你就可以使用这样的包：https: //www.npmjs.com/package/react-drag-sortable
Try not to use jQuery for this sort of thing any more. By the time you have drag/drop interfaces you have the makings of a webapp, not a web page, and you're going the wrong direction.
尽量不要再将 jQuery 用于此类事情。当您拥有拖/放界面时，您就拥有了 Web 应用程序的组成部分，而不是网页，并且您走错了方向。
