Drag the title bar, the place to be put in the position: row and column are reversed:
<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")); // the pick up th column index
var D = the this .cellIndex; // be placed in the column index
var _t is = the this ;
$ ( " #callGrid TR> th " ) .each ( function () {
var J = the this ;
IF (j.cellIndex == I) {
_t.before (J);
return to 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 >
this is achieved Liezi form drag function, if the title is th form of expression, then the above js of $ ( "# callGrid td")
, $ ( "# callGrid td", $ ( "# callGrid td ") Replaced ( "#callGrid tr> th can form")
<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>