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

Question

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.

Answer 1

I have came to see a package named react-nestable and it works to create nested drag and drop. I am putting a link for that package below - react-nestable npm

Answer 2

So while you can use https://github.com/dbushell/Nestable or 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

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.

Answer 3

I am using johnny's jquery-sortable plugin, which can be found here 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 topic if you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).

Hope this is helpful.

Answer 4

You can also try https://github.com/dbushell/Nestable (demo: http://dbushell.github.io/Nestable/).

Works with mouse and touch and this plugin is compatible with jQuery and Zepto.