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')); } });
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
Post a Comment