拖动标题列，放在所要放的位置：列与列互换位置：
<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>