One issue I encountered was using a cfloop to go over the list returned by javascript.  The space added after the comma (code: getAttribute('recordid') + ', ';) induces an error in the cfloop process (it loops over the list the appropriate number of times, but it only uses the first item in the list each time).  Thought I would point that out for any one else having problems with it.

Also replace "alert(orderList);" with "document.formname.hiddenField.value = orderList;" (where formname is the form's name, and hiddenField is the name of the hidden form field) to input the data into a hidden form field. (For those asking the question so long ago.)

I have a div populated with available images from the database, and i can drag them into a selected images div. but i cannot rearrange the selected images div after they are dropped.

also if i come back to this particular image selection the availble models are only populated with the images that are available minus the ones that are already in the selected images div.

i keep going around in circles.

i have the php code to load the images into their appropriate divs based on wheter they were previously added to the selected images div or not, and then i can make them sort individually but as soon as i drag an available image into the selected images div the sorting stops working, and the already selected images cannot be removed from that div.

help me, am i trying to do something that cannot be done.

Thx, axel

I needed a solution to sort multiple categories of items from the same table, so I created a script that creates the list via php and assigns each a unique id and calls the Sortable.create() function as well.  The js function is passed the list id as an argument – and subsequently passes it on to the server-side php script that sets the new sort_order for each row.

The php that creates the list from the mysql database:

<?php
/* connection script removed – connect to your db here */
$r = mysql_query ("SELECT * FROM sometable ORDER BY sort_order ASC");
$listname = 'list_' . rand('111111','999999');
print '<ul id="' . $listname . '" onMouseUp="getOrder(\'' . $listname . '\')">';
while ($row = mysql_fetch_array($r))
{
extract($row);
print '<li id="item_' . $id . '">$title</li>";
}
print '</ul>';
#create the sortable list via scriptaculous
print '<script>Sortable.create("' . $listname . '");</script>';
?>

The js function – note the listname arg:

<script language="JavaScript">
var url = '/thepathtomybackendscript/script.php';
function getOrder(listname) {
var orderList = Sortable.serialize(listname);
sendRequest(url + '?listname=' + listname + '&' + orderList);
}
makeRequest(url);
</script>

The server-side script called via AJAX:

<?php
/* connection script removed – connect to your db here */
if ($array = $_SERVER['QUERY_STRING'])
{
$listname = $_GET['listname'];
parse_str($_SERVER['QUERY_STRING'],$newSortorderArray);
foreach ($newSortorderArray[$listname] as $key => $value)
{
mysql_query("UPDATE sometable SET sort_order='$key' WHERE id='$value'");
}
/* string to be returned, if any: print_r ($newSortorderArray[$listname); */
}
?>

The only component missing here is the actual AJAX javascript, which is pretty basic.  If you're new to this here is a good place to start:  https://developer.mozilla.org/En/AJAX:Getting_Started

Hope this helps someone.  Thanks again for the tute!

One thing. – When you use your own propriety attribute (recordid), why not just use id instead?

I’m looking to create a drag and drop form. Any ideas on how this can be done? The idea would be that I can drag between 1 and 10 sub forms onto a droppable object, edit each of the forms, and then post the information from each form.

Thanks.

Jonathan