Scriptaculous drag and drop help / post / php

1

[LEFT]hello all

i’ve been working with scriptaculous drag and drop function and its working great.

if i have a single list/div section i can reorder the data and bash it works.

but i want to scale up and do multiple lists. i’ve got the drag and drop part working the only thing i’m confused with is getting the multiple data out correctly to be used with php.

heres my code so far:


<div id="page">
<div id="group_1" class="section" >
<h3 class="handle">front</h3>
<div id="item_6" class="lineitem">great next step</div>
<div id="item_5" class="lineitem">test</div>
</div>
<div id="group_4" class="section" >
<h3 class="handle">donate</h3>
<div id="item_2" class="lineitem">legacy</div>
<div id="item_4" class="lineitem">test page</div>
</div>
<div id="group_6" class="section" >
<h3 class="handle">guff</h3>
<div id="item_3" class="lineitem">donate</div>
</div>
</div>


<br/>
<br/>
<input type="button" onClick="getGroupOrder()" value="Debug: Show serialized group order">


<script type="text/javascript">
sections = [,'group_1','group_4','group_6'];
function createLineItemSortables() {
		for(var i = 0; i < sections.length; i++) {
			Sortable.create(sections*,{tag:'div',dropOnEmpty: true, containment: sections,only:'lineitem'});
		}
	}

	function createGroupSortable() {
		Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
	}

	/*
	Debug Functions for checking the group and item order
	*/
	function getGroupOrder() {
		var sections = document.getElementsByClassName('section');
		var alerttext = '';
		sections.each(function(section) {
			var sectionID = section.id;
			var order = Sortable.serialize(sectionID);
			//alerttext += sectionID + ': ' + Sortable.sequence(section) + '
';
			alerttext += order + '&';
		});
		alert(alerttext);
		return false;
	}
	
	function updateOrderPages(){
	
		var sections = document.getElementsByClassName('section');
		var postdata = '';
		sections.each(function(section) {
		
			var order = Sortable.serialize(section.id);
			postdata += order + '&';
		});
	
	
	
	
		var options = {
			method : 'post',
			parameters : postdata
		};
		new Ajax.Request('http://mysite.uk/to_my_code', options);
	}
	

	// <![CDATA[
Sortable.create('group_1',{tag:'div',dropOnEmpty: true, containment: sections, only:'lineitem', onUpdate:updateOrderPages});
Sortable.create('group_4',{tag:'div',dropOnEmpty: true, containment: sections, only:'lineitem', onUpdate:updateOrderPages});
Sortable.create('group_6',{tag:'div',dropOnEmpty: true, containment: sections, only:'lineitem', onUpdate:updateOrderPages});

	Sortable.create('page',{tag:'div',only:'section',handle:'handle', onUpdate:updateOrderPages});
	// ]]>
 </script>

any help would be greatly appreciated. :wink:
[/LEFT]