163信箱的移动效果 - JavaScript论坛

linuxpluto

等　级：贵宾
威　望：13
帖　子：889
专家分：23
注　册：2005-8-14

楼主

问题点数：0 回复次数：2

163信箱的移动效果


<!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>