The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

bugboy (2) [Avatar] Offline
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 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 id="group_6" class="section" >
<h3 class="handle">guff</h3>
<div id="item_3" class="lineitem">donate</div>

<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[i],{tag:'div',dropOnEmpty: true, containment: sections,only:'lineitem'});

function createGroupSortable() {

Debug Functions for checking the group and item order
function getGroupOrder() {
var sections = document.getElementsByClassName('section');
var alerttext = '';
sections.each(function(section) {
var sectionID =;
var order = Sortable.serialize(sectionID);
//alerttext += sectionID + ': ' + Sortable.sequence(section) + '
alerttext += order + '&';
return false;

function updateOrderPages(){

var sections = document.getElementsByClassName('section');
var postdata = '';
sections.each(function(section) {

var order = Sortable.serialize(;
postdata += order + '&';

var options = {
method : 'post',
parameters : postdata
new Ajax.Request('', 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});
// ]]>

any help would be greatly appreciated.
bugboy (2) [Avatar] Offline
Re: scriptaculous drag and drop help / post / php
sorry new to the forum code didn't show up.