<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/effects.js"></script>
<script type="text/javascript" src="src/dragdrop.js"></script>
<script type="text/javascript">
var myStartEffect = function(element) {
element._opacity = Element.getOpacity(element);
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.5});
new Effect.Highlight(element, {});
}
</script>
<style type="text/css">
ul {padding:0px; border:0px; margin:0px; list-style:none;}
li {
margin: 5px auto;
padding: 2px;
width: 100%;
text-align:center;
list-style-type:none;
border: 1px solid #1a588c;
background-color: #edf5fc
}
</style>
<title>Drag and Drop : Example 1</title>
</head>
<body>
<ul id="myList" class="myList">
<li id="item_1">Negombo</li>
<li id="item_2">Colombo</li>
<li id="item_3">Matara</li>
<li id="item_4">Galle</li>
</ul>
<p id="myList_serialize"></p>
<input type="text" id="newOrderInput" name="newOrderInput" value="">
<script type="text/javascript" charset="utf-8">
Sortable.create('myList', {starteffect: myStartEffect,
onChange:function(element){
var totElement = 4;
var newOrder = Sortable.serialize(element.parentNode);
for(i=1; i<=totElement; i++){
newOrder = newOrder.replace("myList[]=","");
newOrder = newOrder.replace("&",",");
}
$('myList_serialize').innerHTML = 'New Order: '+ newOrder;
$('newOrderInput').value = newOrder;
}
});
</script>
</body>
</html>