设为首页  加入收藏 
网上投稿 网站地图
您现在的位置: 天添资源网 >> 电脑网络 >> 网页设计 >> 网页特效 >> 电脑正文

用鼠标拖动表格进行排序

作者:佚名    电脑来源:中国站长站    点击数:    更新时间:2006-6-18

<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>
用鼠标移动TR<br> 
  <TABLE WIDTH="300" BORDER="1" >
   
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
   <TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR>

   </script>
  </TABLE>


电脑录入:不落尘埃    责任编辑:不落尘埃 
发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
  • 上一个电脑:

  • 下一个电脑:
  •  
    ■■相 关 文 章: 网站版权与免责声明:
    跨框架下拉菜单
    通用表单验证函数
    静态页面的值传递(三部曲)
    用javascript获得地址栏参数…
    校验日期的函数
    Select的OnChange()事件
    区分只读文本框和普通文本框的背…
    1、信息来源网络,感谢原创者和原录入者。本站转载其文并不代表赞同其观点或证实其内容。网站所有信息仅供参考,不构成任何之建议、推荐或指引,不能仅凭此信息购药、用药、诊断疾病或开处方,而应以其使用说明书为准,并谨遵医嘱。
    2、网站中转载的资料及图片,其版权属原作者或页面内声明的版权人拥有。如果文章的作者或编辑认为不宜上网供大家浏览,或不应无偿使用,请及时用电子邮件或电话通知我们,以便迅速采取适当措施,避免双方造成不必要的经济损失。
     
    关于我们 | 联系我们 | 客户服务 | 申请链接 | 合作联盟 | 诚征代理 | 诚聘英才
      www.ttzyw.com
    备案序号:桂ICP备号