|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>drag table cell</title>
<style type="text/css">
td{position:relative;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head><body style="margin-left:0px; margin-top:0px;"><table width="281" border="1" bordercolor="#CCCCCC" id="candrag">
<tr>
<td width="73">title</td>
<td width="52">title</td>
<td width="65">title</td>
<td width="63">title</td>
</tr>
<tr>
<td width="73">111111</td>
<td width="52">111111</td>
<td width="65">111111</td>
<td width="63">111111</td>
</tr>
<tr>
<td >2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>333333333</td>
<td>333333333</td>
<td>3333333</td>
<td>3333333</td>
</tr>
<tr>
<td>44444</td>
<td>44444</td>
<td>444444</td>
<td>44444</td>
</tr>
<tr>
<td>555555</td>
<td>55555</td>
<td>55555</td>
<td>55555</td>
</tr>
</table>
<script language="javascript" >
var obj;
var xx=0,yy=0;
var tagobj;
var dragobj;
function dragtableinit(){
var tableobjs = document.getElementsByTagName("TR");
for(var i=0;i<tableobjs.length;i++){
if((tableobjs[i].parentNode.parentNode.id).toString().indexOf("drag")!=-1){
tableobjs[i].onmousedown=mousedown;
tableobjs[i].ondragover=dragover;
tableobjs[i].ondragend=dragend;
tableobjs[i].ondrag=dragmove;
tableobjs[i].style.position="relative";
tableobjs[i].style.zIndex=1;
}
}
}
function mousedown(){
obj = event.srcElement;
if(obj.tagName=="TD") obj=obj.parentNode;
if(obj.tagName!="TR") return false;
if(obj.rowIndex==0) return false;
yy=event.clientY;
xx=event.clientX;
obj.style.zIndex=0;
try{
obj.dragDrop();
}catch(e){
}
}
function dragmove(){
obj.style.top = event.clientY-yy;
obj.style.left = event.clientX-xx;
}
function dragover(){
tagobj=event.srcElement;
if(tagobj.tagName=="TD"){tagobj=tagobj.parentNode;}
if(tagobj.tagName!="TR")return false;
}
function dragend(){
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=1;
if(tagobj!=null && tagobj.rowIndex!=0){
var t1=candrag.rows[obj.rowIndex];
var t2=candrag.rows[tagobj.rowIndex];
candrag.getElementsByTagName('tbody')[0].insertBefore(obj,tagobj);
tagobj.style.zIndex=1;
} tagobj=null;
}
dragtableinit();
</script>
</body>
</html>
|
