<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 with Table : Example 2</title>
</head>
<body>
<table border="0" width="100%" cellpadding="4" style="border-collapse:
collapse">
<tr>
<td bgcolor="#1A588C" width="20%"><font color="#FFFFFF">City</font></td>
<td bgcolor="#1A588C" width="20%"><font color="#FFFFFF">Coconut</font></td>
<td bgcolor="#1A588C" width="20%"><font color="#FFFFFF">Milk powder</font></td>
<td bgcolor="#1A588C" width="20%"><font color="#FFFFFF">Onion</font></td>
<td bgcolor="#1A588C" width="20%"><font color="#FFFFFF">Potato</font></td>
</tr>
</table>
<ul id="myList" class="myList">
<li id="item_1">
<table border="0" width="100%" cellpadding="4" style="border-collapse:
collapse">
<tr>
<td bgcolor="#DFEDF9" width="20%">Negombo</td>
<td bgcolor="#DFEDF9" width="20%">Rs.20</td>
<td bgcolor="#DFEDF9" width="20%">Rs.200</td>
<td bgcolor="#DFEDF9" width="20%">Rs.150</td>
<td bgcolor="#DFEDF9" width="20%">Rs.200</td>
</tr>
</table>
</li>
<li id="item_2">
<table border="0" width="100%" cellpadding="4" style="border-collapse:
collapse">
<tr>
<td width="20%">Dickwella</td>
<td width="20%">Rs.15</td>
<td width="20%">Rs.200</td>
<td width="20%">Rs.100</td>
<td width="20%">Rs.150</td>
</tr>
</table>
</li>
<li id="item_3">
<table border="0" width="100%" cellpadding="4" style="border-collapse:
collapse">
<tr>
<td bgcolor="#DFEDF9" width="20%">Colombo</td>
<td bgcolor="#DFEDF9" width="20%">Rs.50</td>
<td bgcolor="#DFEDF9" width="20%">Rs.250</td>
<td bgcolor="#DFEDF9" width="20%">Rs.200</td>
<td bgcolor="#DFEDF9" width="20%">Rs.300</td>
</tr>
</table>
</li>
<li id="item_4">
<table border="0" width="100%" cellpadding="4" style="border-collapse:
collapse">
<tr>
<td width="20%">Matara</td>
<td width="20%">Rs.18</td>
<td width="20%">Rs.200</td>
<td width="20%">Rs.150</td>
<td width="20%">Rs.150</td>
</tr>
</table>
</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>