javascript - Sortable doesn't recognize inserted elements -


i have two-level deep sortable (jquery) lists of following structure. both ul-elements , li-elements sortable.

<div id="container">         <ul id="x_one">         <li class="y_one"></li>         <li class="y_two"></li>         <li class="y_three"></li>     </ul>     <ul id="x_two">         <li class="y_four"></li>         <li class="y_five"></li>         <li class="y_six"></li>     </ul> </div> 

when dynamically insert (prepend) additional ul element, this:

<div id="container">         <ul id="x_three">      </ul>     <ul id="x_one">         <li class="y_one"></li>         <li class="y_two"></li>         <li class="y_three"></li>     </ul>     <ul id="x_two">         <li class="y_four"></li>         <li class="y_five"></li>         <li class="y_six"></li>     </ul> </div> 

i cannot drag li-elements onto ul#x_three before refreshing page.

how can inserted elements these recognized jquery's sortable?

jquery code:

$('#container').sortable({       update: function() {    $.post($(this).data('update-url'), $(this).sortable('serialize'));   } }); 

http://jsfiddle.net/mvhb4/2/

when add items sortable (rather dragging , dropping within sortable), don't have attached event code necessary operate. fix calling 'refresh' on container:

$('#container').sortable('refresh'); 

the jquery ui docs refresh in sortable widget say:

refresh()

refresh sortable items. triggers reloading of sortable items, causing new items recognized.

this method not accept arguments.

update

i'm sorry missed before two-level sorting doing (i confess haven't worked sortables before). fiddle extremely helpful--i recommend creating 1 every javascript question!

the problem since making sortable not <ul> elements in #container <div>, <li> elements underneath them--and using connectwith make them cross-list movable--when add new <ul>, needs made sortable , wasn't (and not part of connectwith groups). simple performing initialization code on again:

$('.list_type').sortable({      connectwith: '.list_type' }); 

and done. it works (jsfiddle).


Comments