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

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.

Answer 2

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.