拖动标题列，放在所要放的位置：列与列互换位置：
<html>
<head>
<title>拖拽</title>
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script type="text/javascript"> $(function () { $("#callGrid td").on("dragover",function(e){ e.originalEvent.preventDefault(); }); //拿起
$("#callGrid td").on("dragstart",function(e){ e.originalEvent.dataTransfer.setData("obj_add",e.currentTarget.cellIndex); }); //放下
$("#callGrid td").on("drop",function(e){ e.originalEvent.preventDefault; var i = parseInt(e.originalEvent.dataTransfer.getData("obj_add"));//所拿起的th列下标
var d = this.cellIndex;//被放入的列下标
var _t = this; $("#callGrid tr>th").each(function(){ var j = this; if(j.cellIndex == i){ _t.before(j); return false; } }); $("#callGrid tbody>tr").each(function(){ var drag = "";//拿起的td
var drop = "";//放下的td
$(this).children().each(function(){ if(this.cellIndex == i){ drag = this; } if(this.cellIndex == d){ drop = this; } }); if(drag != undefined && drop != undefined && drag != "" && drop != ""){ drop.before(drag); } }); }); }) </script>
</head>
<body> 这个列子是表格拖拽功能的实现，如果标题是th形式表达，那么上面js的$("#callGrid td") 、$("#callGrid td"、$("#callGrid td")换成("#callGrid tr>th形式就可") <table id="callGrid" algin="center" >
<tr>
<td draggable="true">序号</td>
<td draggable="true">姓名</td>
<td draggable="true">年龄</td>
</tr>
<tr>
<td name="id">1</td>
<td name="name">张三</td>
<td name="age">20</td>
</tr>
</table>
</body>
</html>