Re: make sortable divs and innerHTML

Walter Lee Davis
Sat, 01 Dec 2007 04:03:22 -0000

On Nov 30, 2007, at 5:24 AM,
info-Rt+jRHwf3olhrNIvIkuUv7NldLUNz+W/@public.gmane.org wrote:

>
> My problem is that elements that were included in my site with
> innerHTML can´t be sortable because the DOM doesn´t know that these
> elements are there.
> Has anybody a solution or an idea to this problem?
>
> ToM
>

Remove the sortable before you add the elements, and add it again after.

The following code does something slightly different (adds sortable
after showing the handles and hiding everything that''s not essential
for the sort), but shows the basic syntax to programmatically add and
remove the sortable handlers.

removeHandles = function(evt){
	$$(''div.handle'').invoke(''hide'');
	$$(''.sort_hide'').invoke(''show'');
	$(''sort'').stopObserving(''click'',removeHandles);
	$(''sort'').update(''Updating...'');
	$(''sort_order'').value = thelist =
Sortable.serialize(''thelist'');
	new Ajax.Request(''/ajax_save_sort_order.php'',{parameters:
{sort_order: thelist},onComplete: function(transport){
		Sortable.destroy(''thelist'');
		$(''sort'').update(''Change Order'');
		$(''sort'').observe(''click'',addHandles);
		refreshList();
	}})
};
addHandles = function(evt){
	$$(''div.handle'').invoke(''show'');
	$$(''.sort_hide'').invoke(''hide'');
	$(''sort'').update(''Done Sorting'');
	$(''sort'').stopObserving(''click'',addHandles);
	Sortable.create(''thelist'',
{dropOnEmpty:false,handle:''handle'',constraint:''vertical''});
	$(''sort'').observe(''click'',removeHandles);
};
$(''sort'').observe(''click'',addHandles);


Walter