Thomas Aagaard Jensen » Blog Archive » Table drag’n’drop

Table drag’n'drop

Prototype and script.aculo.us javascript libraries gives you the possibility to sort list elements in a webpage by dragging them around using Sortable.create.A good example is rearranging <li>’s nested in <ul> but you can also drag <table>’s inside <div>’s.In the comment there’s a full example - just place prototype.js and scriptaculous.js alongside your HTML page.

Tags: ajax, drag'n'drop, prototype, scriptaculous

This entry was posted on Wednesday, October 17th, 2007 at 1:06 and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One Response to “Table drag’n'drop”

taj Says:
October 17th, 2007 at 1:35

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript">
function myVoid() {
}
</script>
<style type="text/css">
.dragme {
cursor: move;
}
</style>
</head>

<body>

<div id="rows">
<table id="row_1" width="50%">
<tbody>
<tr>
<td width="9%">Jens</td>
<td width="9%">Jensvej 1</td>
<td width="9%">12345678</td>
<td width="9%">87654321</td>
<td width="9%">jens@jensen.bla</td>
<td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a>

</td>

</tr>
</tbody>
</table>
<table id="row_2" width="50%">
<tbody>
<tr>
<td width="9%">Niels</td>
<td width="9%">Nielsvej 1</td>
<td width="9%">98765432</td>
<td width="9%">98765432</td>
<td width="9%">niels@nielsen.bla</td>
<td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a>

</td>
</tr>
</tbody>
</table>
<table id="row_3" width="50%">
<tbody>
<tr>
<td width="9%">Anders</td>
<td width="9%">Andersvej 1</td>
<td width="9%">34567890</td>
<td width="9%">99876543</td>
<td width="9%">anders@andersen.bla</td>
<td class="dragme" width="5%"><a href="javascript:myVoid();"><nobr>Drag me</nobr></a>

</td>
</tr>
</tbody>
</table>
</div>
<p id="displayorder"></p>
<script type="text/javascript">
// <![CDATA[
Sortable.create("rows", {
handle: 'dragme',
tag: 'table',
onUpdate: function showOrder() {
$('displayorder').innerHTML = $('displayorder').innerHTML + ' >> ' +
Sortable.sequence('rows');
}
});
$('displayorder').innerHTML = 'Order: '+Sortable.sequence('rows');
// ]]>
</script>
</body>
</html>