See demo
drag and drop the left table row and see result in right table
Why have another plugin?
Dragging and dropping rows within a table can?t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don?t work well with table rows on all browsers, so we have to go for simpler effects.
What does it do?
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can?t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.
How to use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mcDropdown jQuery Plug-in</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.tablednd.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" media="all" />
<script type="text/javascript">
$(document).ready(function() {
$('#table-3').tableDnD({
onDrop: function(table, row) {
//alert($.tableDnD.serialize());
$('#AjaxResult').load("ajax.php?" + $.tableDnD.serialize());
}
});
});
</script>
</head>
<body>
<div class="tableDemo">
<div id="AjaxResult">
<img src="images/1.gif"> 1 One<br>
<img src="images/2.gif"> 2 Two<br>
<img src="images/3.gif"> 3 Three (Can&amp;amp;amp;#8217;t drop on this row)<br>
<img src="images/4.gif"> 4 Four<br>
<img src="images/5.gif"> 5 Five (Can&amp;amp;amp;#8217;t drag this row)<br>
<img src="images/6.gif"> 6 Six<br>
</div>
<table id="table-3" cellspacing="0" cellpadding="2" height="200">
<tr id="1">
<td bgcolor="#FFFF99">1</td>
<td bgcolor="#FFFF99">One</td>
</tr>
<tr id="2">
<td bgcolor="#FF99CC">2</td>
<td bgcolor="#FF99CC">Two</td>
</tr>
<tr id="3" class="nodrop">
<td bgcolor="#0066CC">3</td>
<td bgcolor="#0066CC">Three (Can&amp;amp;amp;#8217;t drop on this row)</td>
</tr>
<tr id="4">
<td bgcolor="#33CC66">4</td>
<td bgcolor="#33CC66">Four</td>
</tr>
<tr id="5" class="nodrag">
<td bgcolor="#990099">5</td>
<td bgcolor="#990099">Five (Can&amp;amp;amp;#8217;t drag this row)</td>
</tr>
<tr id="6">
<td bgcolor="#FF0000">6</td>
<td bgcolor="#FF0000">Six</td>
</tr>
</table>
</div>
</body>
</html>
php code ajax.php
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
$result = $_REQUEST["table-3"];
$val = array("","One","Two","Three (Can&amp;amp;amp;#8217;t drop on this row)","Four","Five (Can&amp;amp;amp;#8217;t drag this row)","Six");
$pval = array("","1.gif","2.gif","3.gif","4.gif","5.gif","6.gif");
foreach($result as $value) {
echo "<img src=\"images/$pval[$value]\"> $value $val[$value]<br/>";
}
?>
More info
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
