问题:

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

under another

that would create a hierarchy. I think in that sense I would have to render a

just in case. I only want to limit it to 2 or 3 levels deep.

$("#sort_list").sortable({   containment: 'parent',                                                                                        axis: 'y',   revert: true,   opacity: 0.8 }); $(".sub_list").sortable({    containment: 'parent',   axis: 'y',   revert: true,   opacity: 0.8, }); $("#sort_list").disableSelection();     one
   two          sub one
     sub two
     
   
   three
   four

回答1:

Excellent answer to this is

https://github.com/ilikenwf/nestedSortable

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

回答2:

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

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

回答3:

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.

回答4:

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/

转载请标明出处:jQuery Nested Sortable - Move LI elements within all available UL's

文章来源: jQuery Nested Sortable - Move LI elements within all available UL's

标签

sortable

jquery