jQuery Nested Sortable - Move LI elements within all available UL's

Question

I have the following code which works although it runs quite slowly I feel. What I want to do is allow

\'s to be moved freely under existing &l

Answer 1

I have used JQuery Interface plugin which was easy to setup and worked pretty well for that task (check the demo), but I wanted something lighter and which do not require additional plugins.

Even JQuery UI library's sortable is kind of rudimentary you can still achieve somehow that functionality:

$("ul").sortable({
items:  '> li',
axis: 'y',
update: function (e, ui) {
    ...
}

This will let you sort "li" under any "ul" (if I can remember correctly). However it will not let you move "li" elements from one "ul" to another "ul". Even it is possible to do it (changing the configuration), I found it not so stable and somehow cumbersome.

I came up with a simple solution: a "flag button", which deactivate sorting and activate moving... and it works like a charm! All you have to do is to keep track the "li" parent id before and after moving it.

My 5 cents.

Answer 2

Most likely the jQuery UI library's sortable functionality isn't that configurable (it's very rudimentary, meant for sorting lists one level deep). You'd be better off simply using one of the tree plug-ins that support drag and drop.

The jQuery UI tree widget is in development, but you can use one of the following plugins:

http://www.jstree.com/

http://abeautifulsite.net/notebook/58

http://news.kg/wp-content/uploads/tree/

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

Answer 3

Excellent answer to this is

https://github.com/ilikenwf/nestedSortable

i am glad that I have found it. jstree was too heavyweight for me.

Answer 4

A "nestable" jquery plugin. Perfect for what I'm trying to do:

http://dbushell.com/2012/06/17/nestable-jquery-plugin/