我需要使用Jquery UI Sortable对动态创建的表进行排序

Question

<script>
function createTable(){
	 
	var mytable = $('<table></table>').attr({ id: "basicTable" });
	var rows = new Number($("#rowcount").val());
	var cols = new Number($("#columncount").val());
	var tr = [];
	//var color ='#'+Math.random().toString(16).substr(2,6);
	var color = 'rgba(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',.8)';
	for (var i = 0; i < rows; i++) {
		//var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
		var row = $('<tr></tr>').appendTo(mytable);
		for (var j = 0; j < cols; j++) {

			$('<td></td>').text("0").css('background-color', color).appendTo(row); 
		}		 
	}
	//console.log("TTTTT:"+mytable.html());
	mytable.appendTo("#box");	      	
	
  
}
  
</script>

<script>
$(function() {
    $( "#box" ).sortable({ cursor: "move", placeholder: "highlight" });
    $( "#box" ).disableSelection();
  });
</script>

table{
		width:300px;
		height:300px;
		border:1px solid #ccc;
		float: left;
		padding-right: 3px;
		border-spacing: 5px;
		margin-right: 5px;
		border-radius: 5px;
	}
	table td{
		padding:10px;
		border:1px solid #ccc;
		border-radius: 5px;
	}
	.highlight {
         border: 1px solid #eee;
         font-weight: bold;
         font-size: 45px;
         background-color: #eee;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
Row :<input type="text" id="rowcount" />
Column :<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" /><br/><br/>
<div id="box">
</div>

这是我的代码，我动态创建表，假设我创建3个表，我可以拖放这3个表。

但是我需要动态地在表中创建的td以类似的方式排序。

非常感谢任何帮助。