ช่วยทีค่ะ เรื่อง Drag and Drop Table เนื่องจากหนูลองหาข้อมูล เกี่ยวกับเรื่อง Drag and Drop table

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablednd_0_5.js"></script>

<h3>Ex2.</h3><br />
<div id="debug" style="float:right;"></div> 
<table id="table-1"  style="border:solid #CCC 1px;" cellpadding="2"> 
<tr id="1"> <td>1</td> <td>One</td> <td>some text</td> </tr> 
<tr id="2"> <td>2</td> <td>Two</td> <td>some text</td> </tr> 
<tr id="3"> <td>3</td> <td>Three</td> <td>some text</td> </tr> 
<tr id="4"> <td>4</td> <td>Four</td> <td>some text</td> </tr> 
</table> 
<br />
<h3>Ex2.</h3><br />
<div id="debugArea"></div>
<table id="table-2"  style="border:solid #CCC 1px;" cellpadding="2"> 
<tr id="1"> <td>1</td> <td>One</td> <td>some text</td> </tr> 
<tr id="2"> <td>2</td> <td>Two</td> <td>some text</td> </tr> 
<tr id="3"> <td>3</td> <td>Three</td> <td>some text</td> </tr> 
<tr id="4"> <td>4</td> <td>Four</td> <td>some text</td> </tr> 
</table> 

<script type="text/javascript">
$(document).ready(function() {
 
	// Initialise the first table (as before)
	$("#table-1").tableDnD();
 
	// Make a nice striped effect on the table
	$("#table-2 tr:even').addClass('alt')");
 
	// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
	$("#table-2").tableDnD({
	    onDragClass: "myDragClass",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	        $("#debugArea").html(debugStr);
	    },
		onDragStart: function(table, row) {
			$("#debugArea").html("Started dragging row "+row.id);
		}
	});
});
</script>

table member {int id,int no,string name}

select name from member order by no asc
1 1 ไมเคิล
2 2 แม็ก
3 3 หมวย
4 4 หมี


<script type="text/javascript">
$(document).ready(function() {
      $("#table-2").tableDnD({
	    onDragClass: "myDragClass",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	       // $("#debugArea").html(debugStr);
		   //$("#debugArea").html($.tableDnD.serialize());
		   var order = $.tableDnD.serialize() + '&action=sortTable'; 
			$.post("updateDB.php", order, function(theResponse){
				$("#debugArea").html(theResponse);
			}); 
	    },
		onDragStart: function(table, row) {
			$("#debugArea").html("Started dragging row "+row.id);
		}
	});
});

</script>

#require("db.php");

$action 				= mysql_real_escape_string($_POST['action']); 
$updateRecordsArray 	= $_POST['table-2'];

if ($action == "sortTable"){
	
	$listingCounter = 1;
	foreach ($updateRecordsArray as $recordIDValue) {
		
		$query = "UPDATE table_test SET no = " . $listingCounter . " WHERE id = " . $recordIDValue;
		//mysql_query($query) or die('Error,update query failed');
		echo $listingCounter.": ".$query."<br>";
		$listingCounter = $listingCounter + 1;	
	}
	
	echo '<pre>';
	print_r($updateRecordsArray);
	echo '</pre>';
	echo 'If you refresh the page, you will see that records will stay just as you modified.';
}