<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getOffset(node){
var x= 0,y=0;
while(node!=null&&node!=document.body){
y+=node.offsetTop;
x+=node.offsetLeft;
node=node.parentNode;
}
return {x:x,y:y};
}
window.onload=function(){
var table=document.getElementById("filelistTab");
var trs=table.getElementsByTagName("tr");
var trfirstTop=getOffset(trs[1]).y;
var trlastTop=getOffset(trs[trs.length-1]).y+trs[trs.length-1].offsetHeight;
var _isMove=false;
var obj={x:0,y:0};
var targetTr=null;
var moveDiv=document.createElement("div");
moveDiv.style.position="absolute";
moveDiv.style.zIndex=1000;
moveDiv.style.backgroundColor="#FF0000";
for(var i= 1,len=trs.length;i<len;i++){
var tr=trs[i];
// tr.onclick=(function(index){
// return function(e){}
// })(i);
tr.onmousedown=function(e){
e=e||window.event;
targetTr= e.target|| e.srcElement;
while(targetTr.nodeName!="TR"){
targetTr=targetTr.parentNode;
}
obj.x = e.clientX;
obj.y= e.clientY;
moveDiv.innerHTML="";
moveDiv.appendChild(targetTr.cloneNode(true));
var offset=getOffset(targetTr);
moveDiv.style.top=offset.y+"px";
moveDiv.style.left=offset.x+"px";
moveDiv.style.height=targetTr.offsetHeight+"px";
moveDiv.style.width=targetTr.offsetWidth+"px";
_isMove=true;
document.body.appendChild(moveDiv);
if(moveDiv.setCapture){
moveDiv.setCapture();
targetTr.style.opacity = 0.5;
// moveDiv.filters.alpha.opacity = 50;
}else{
window.captureEvents(Event.MOUSEMOVE);
moveDiv.style.opacity = 0.5;
}
e.preventDefault();
}
document.onmousemove=function(e){
if(!_isMove){
return;
}
e=e||window.event;
if(parseInt( moveDiv.style.top)<=parseInt(trfirstTop)){
moveDiv.style.top=trfirstTop+"px";
}
if(parseInt( moveDiv.style.top)>=parseInt(trlastTop)){
moveDiv.style.top=trlastTop+"px";
}
var mx = e.clientX-obj.x;
var my= e.clientY- obj.y;
moveDiv.style.top=parseInt( moveDiv.style.top)+my+"px";
obj.x= e.clientX;
obj.y= e.clientY;
}
document.onmouseup=function(e){
_isMove=false;
var ToNode=null;
var divTop=parseInt(moveDiv.style.top);
for(var i= 1,len=trs.length;i<len;i++){
var curtr=trs[i];
var top=getOffset(curtr).y;
var height=curtr.offsetHeight;
if(i==1){
if(divTop<=top){
ToNode=curtr;
table.getElementsByTagName("tbody")[0].insertBefore(targetTr,ToNode);
break;
}
}else if(i==len-1){
if(divTop>=top){
ToNode=curtr;
table.getElementsByTagName("tbody")[0].appendChild(targetTr);
}
}else{
var curtr2=trs[i+1];
var top2=getOffset(curtr2).y;
if(divTop==top){
table.getElementsByTagName("tbody")[0].insertBefore(targetTr,curtr);
break;
}else if(divTop>top&&divTop<=top2){
table.getElementsByTagName("tbody")[0].insertBefore(targetTr,curtr2);
break;
}
}
}
document.body.removeChild(moveDiv);
if(moveDiv.releaseCapture){
moveDiv.releaseCapture();
// moveDiv.filters.alpha.opacity = 100;
targetTr.style.opacity = 1;
}else{
window.releaseEvents(moveDiv.MOUSEMOVE);
targetTr.style.opacity = 1;
}
}
}
};
function tableSort(){
var tb=document.getElementById("filelistTab");
var rows=tb.getElementsByTagName("tr");
for(var i=1;i<rows.length;i++){ //跳过表头的tr
var objInput = rows[i].getElementsByTagName("td")[0].childNodes[0];
alert(objInput.value);
objInput.value = i;
}
}
</script>
</head>
<body>
<input type="button" value="Save" onclick="tableSort();">
<table id="filelistTab" cellspacing="0" cellpadding="2" border="1" align="center">
<tr>
<td class="gridtitle" style="WIDTH: 40px">列一</td>
<td class="gridtitle" style="WIDTH: 100px">列二</td>
<td class="gridtitle" style="WIDTH: 110px">列三</td>
</tr>
<tr id="1" title="拖动行可以进行排序" >
<td class="gridtitle"><input class="text" id="group1" style="WIDTH: 30px" type="text" readonly value="1" /></td>
<td class="gridtitle"> 11111111111111111111 </td>
<td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="100px" value="11111111111111111111" /></td>
</tr>
<tr id="2" title="拖动行可以进行排序" >
<td class="gridtitle"><input class="text" id="group2" style="WIDTH: 30px" type="text" readonly value="2" /></td>
<td class="gridtitle"> 222222222222222222222 </td>
<td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="100px" value="22222222222222222222222" /></td>
</tr>
<tr id="3" title="拖动行可以进行排序" >
<td class="gridtitle"><input class="text" id="group3" style="WIDTH: 30px" type="text" readonly value="3" /></td>
<td class="gridtitle"> 3333333333333333333333 </td>
<td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="100px" value="333333333333333" /></td>
</tr>
<tr id="4" title="拖动行可以进行排序" >
<td class="gridtitle"><input class="text" id="group4" style="WIDTH: 30px" type="text" readonly value="4" /></td>
<td class="gridtitle"> 444444444444444444444 </td>
<td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="100px" value="4444444444444444444444444444" /></td>
</tr>
<tr id="5" title="拖动行可以进行排序" >
<td class="gridtitle"><input class="text" id="group5" style="WIDTH: 30px" type="text" readonly value="5" /></td>
<td class="gridtitle"> 55555555555555555555555 </td>
<td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="100px" value="555555555555555555555" /></td>
</tr>
<tr id="6" title="拖动行可以进行排序" >
<td class="gridtitle"><input class="text" id="group6" style="WIDTH: 30px" type="text" readonly value="6" /></td>
<td class="gridtitle"> 6666666666666666666666666 </td>
<td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="100px" value="666666666666666666666" /></td>
</tr>
</table>
</body>
</html>