AJAX sorting with Script.aculo.us

Prototype

Extensive JavaScript library; DOM manipulation, AJAX etc.

Script.aculo.us

Builds upon Prototype and provides animation, drag-and-drop, DOM manipulation and effects.

Script.aculo.us lets create sortable lists which can be synchronized with the back-end with AJAX.


<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/dragdrop.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>

<div>Sort order: <span id="result">One, Two, Three, Four, Five, Six</span></div>

<ul id="sort_list">
	<li id="item_0">One</li>
	<li id="item_1">Two</li>
	<li id="item_2">Three</li>
	<li id="item_3">Four</li>
	<li id="item_4">Five</li>
	<li id="item_5">Six</li>
</ul>

<script type="text/javascript">
Sortable.create
(
	'sort_list',
	{
		constraint: false,
		onUpdate: function()
		{
			new Ajax.Updater
			(
				'result', 'sort.php',
				{ postBody: Sortable.serialize('sort_list') }
			);
		}
	}
);
</script>

<?php
// Sort.php
$values = array('One','Two','Three','Four','Five','Six');

$res = array();
foreach( $_REQUEST['sort_list'] as $order )
	$res[] = $values[$order];
	
echo join(', ',$res);
?>

Sort order: One, Two, Three, Four, Five, Six

Here's how make a list of boxes