Code:
<html>
<head>
<title>Sorting Example</title>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
Sortable.create('imagelist',{tag:'div'});
}
function serialize(container, name){
$('display').innerHTML =
'Serialization of ' + $(container).id + ' is: <br/><pre>' +
Sortable.serialize( container,{ name:name} ) + '</pre>';
}
</script>
<style type="text/css">
div { cursor: move; }
img { border: 1px solid red; margin:5px; }
</style>
</head>
<body>
<p>Drag and drop list images to re-arrange them</p>
<div id="imagelist">
<div><img src="one.jpg"/></div>
<div><img src="two.jpg"/></div>
<div><img src="three.jpg"/></div>
<div><img src="four.jpg"/></div>
</div>
<p>Click following button to see serialized list which can be
passed to backend script, like PHP, AJAX or CGI</p>
<button type="button" value="Click Me"
onclick="serialize('imagelist', 'name')"> Serialize
</button>
<div id="display" style="clear:both;padding-top:32px"></div>
</body>
</html>
_________________
Thanks
Robin