百度空间 | 百度首页 
               
 
查看文章
 
使表格能够自动进行拖拽
2007-06-11 14:27

<html><head><script language="javascript">
   var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToMove(obj){
     if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}

</script></head><body>用鼠标移动TR<br>
   <table border="1" width="300">
   
    <tbody><tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td bgcolor="blue">0</td><td>0</td><td>0</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td bgcolor="black">1</td><td>1</td><td>1</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td bgcolor="red">2</td><td>2</td><td>2</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td>3</td><td>3</td><td>3</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td>4</td><td>4</td><td>4</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td>5</td><td>5</td><td>5</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td>6</td><td>6</td><td>6</td></tr>
    <tr style="height: 25px; position: relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);" bgcolor="#ffffff"><td>7</td><td>7</td><td>7</td></tr>
   
   </tbody></table>
</body></html>


类别:Ajax | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu