jquery+Sortable实现表格行拖动排序实现表格行拖动排序

• draggable=“true” 开启拖拽属性

• ondragstart - 用户开始拖动元素时触发

• ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

• ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

<table class="tablelist">
	<thead>
		<tr>
			<th>ID</th>
			<th>名字</th>
		</tr>
	</thead>
	<tbody class="tbody" id="rightTbody{$cabinetId}" ondrop="drop(event)"
		ondragover="allowDrop(event)">
		<tr class="trStyle" draggable="true" ondragstart="drag(event)"> 
			<td>1</td>
			<td>张三</td>
		</tr>
		<tr class="trStyle" draggable="true" ondragstart="drag(event)"> 
			<td>2</td>
			<td>李四</td>
		</tr>
	</tbody>
</table>

<script src="{url:@static/js/jquery-ui/jquery-ui-1.9.2-min.js}"></script>
<script src="{url:@static/Sortable.min.js}"></script>
<script type="text/javascript">
	function allowDrop(ev) {
		ev.preventDefault();
	}
	function drag(ev) {//拖拽时
		ev.dataTransfer.setData("Text", ev.target.id);
		var originalDivId = ev.target.id;//放置wudiv
	}
	function drop(ev) {//放下时
		//手动排序
		$(".layui-table-c").sortable({
			cursor: "move",
			items: "tr", //只是tr可以拖动 
			opacity: 1, //拖动时，透明度为0.6 
			revert: false, //释放时，增加动画 
			update: function (event, ui) { //更新排序之后 
				var categoryids = $(this).sortable("toArray");
				var $this = $(this);
			}
		});
	}
</script>