js table操作 ------ 拖拽行为并且使其自动贴附
本文共 7815 字，大约阅读时间需要 26 分钟。
代码1：
< html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < title > JK:支持民族工业,尽量少买X货 </ title > 
< 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 > < 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 > </ TABLE > </ body > </ html > 代码2：
< html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < title > JK:支持民族工业,尽量少买X货 </ title > < style > .removableObj { height : 25 ; position : relative ; } </ style > < script language ="javascript" > var beginMoving = false ; var sourceObj = null ; var objectObj = null ; var objectObj2 = null ; function MouseDownToMove(obj) { obj.style.zIndex = 1 ; obj.mouseDownY = event.clientY; obj.mouseDownX = event.clientX; beginMoving = true ; obj.setCapture(); sourceObj = obj; objectObj = null ; } 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 ; window.setTimeout( " swapFun() " , 20 ); } function MouseOverFun(obj) { if (obj == sourceObj) return false ; objectObj = obj; } function MouseOverFun2(obj) { objectObj2 = obj; } function swapFun() { if (sourceObj != null && objectObj != null ) objectObj.insertAdjacentElement( " beforeBegin " ,sourceObj); else if (sourceObj != null && objectObj2 != null ) objectObj2.insertAdjacentElement( " beforeEnd " ,sourceObj); sourceObj = null ; objectObj = null ; objectObj2 = null ; } </ script > </ head > < body > < table border ="1" width ="100%" height ="58" > < tr > < td width ="34%" valign ="top" height ="46" onmouseover ="MouseOverFun2(this);" > < table border ="1" width ="100%" bgcolor ="#99CCFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="23%" > 和 </ td > < td width ="21%" > 飞过海 </ td > </ tr > < tr > < td width ="23%" > </ td > < td width ="21%" > </ td > </ tr > </ table >< table border ="1" width ="100%" bgcolor ="#FFCCFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="35%" > 护身符哈 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="35%" > 和是是护 </ td > </ tr > </ table > < table border ="1" width ="100%" bgcolor ="#00CC99" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="9%" > </ td > < td width ="35%" > 呵呵 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="9%" > </ td > < td width ="35%" > 和 </ td > </ tr > </ table > </ td > < td width ="32%" valign ="top" height ="52" onmouseover ="MouseOverFun2(this);" > < table border ="1" width ="100%" bgcolor ="#FF0000" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > </ tr > < tr > < td width ="21%" > ， </ td > </ tr > </ table > < table border ="1" width ="100%" bgcolor ="#00FFFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="35%" > 护身符哈 </ td > < td width ="21%" > </ td > < td width ="23%" > 呵呵 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="35%" > 和是是护 </ td > < td width ="21%" > </ td > < td width ="23%" > 和 </ td > </ tr > </ table > </ td > < td width ="34%" valign ="top" height ="52" onmouseover ="MouseOverFun2(this);" > < table border ="1" width ="100%" bgcolor ="#FF9966" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="35%" > 护身符哈 </ td > < td width ="21%" > </ td > < td width ="23%" > 呵呵 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="35%" > 和是是护 </ td > < td width ="21%" > </ td > < td width ="23%" > 和 </ td > </ tr > </ table > < table width ="100%" border ="1" bgcolor ="#FFFFCC" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="87" > 输多发 </ td > < td width ="115" > 嘎撒递归 </ td > </ tr > < tr > < td width ="87" > 嘎大嘎 </ td > < td width ="115" > 大幅度 </ td > </ tr > < tr > < td width ="87" > 过大撒 </ td > < td width ="115" > 嘎 </ td > </ tr > </ table ></ td > </ tr > </ table > </ body > </ html >
< html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < title > JK:支持民族工业,尽量少买X货 </ title > < 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 > < 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 > </ TABLE > </ body > </ html > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < title > JK:支持民族工业,尽量少买X货 </ title > < style > .removableObj { height : 25 ; position : relative ; } </ style > < script language ="javascript" > var beginMoving = false ; var sourceObj = null ; var objectObj = null ; var objectObj2 = null ; function MouseDownToMove(obj) { obj.style.zIndex = 1 ; obj.mouseDownY = event.clientY; obj.mouseDownX = event.clientX; beginMoving = true ; obj.setCapture(); sourceObj = obj; objectObj = null ; } 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 ; window.setTimeout( " swapFun() " , 20 ); } function MouseOverFun(obj) { if (obj == sourceObj) return false ; objectObj = obj; } function MouseOverFun2(obj) { objectObj2 = obj; } function swapFun() { if (sourceObj != null && objectObj != null ) objectObj.insertAdjacentElement( " beforeBegin " ,sourceObj); else if (sourceObj != null && objectObj2 != null ) objectObj2.insertAdjacentElement( " beforeEnd " ,sourceObj); sourceObj = null ; objectObj = null ; objectObj2 = null ; } </ script > </ head > < body > < table border ="1" width ="100%" height ="58" > < tr > < td width ="34%" valign ="top" height ="46" onmouseover ="MouseOverFun2(this);" > < table border ="1" width ="100%" bgcolor ="#99CCFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="23%" > 和 </ td > < td width ="21%" > 飞过海 </ td > </ tr > < tr > < td width ="23%" > </ td > < td width ="21%" > </ td > </ tr > </ table >< table border ="1" width ="100%" bgcolor ="#FFCCFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="35%" > 护身符哈 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="35%" > 和是是护 </ td > </ tr > </ table > < table border ="1" width ="100%" bgcolor ="#00CC99" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="9%" > </ td > < td width ="35%" > 呵呵 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="9%" > </ td > < td width ="35%" > 和 </ td > </ tr > </ table > </ td > < td width ="32%" valign ="top" height ="52" onmouseover ="MouseOverFun2(this);" > < table border ="1" width ="100%" bgcolor ="#FF0000" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > </ tr > < tr > < td width ="21%" > ， </ td > </ tr > </ table > < table border ="1" width ="100%" bgcolor ="#00FFFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="35%" > 护身符哈 </ td > < td width ="21%" > </ td > < td width ="23%" > 呵呵 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="35%" > 和是是护 </ td > < td width ="21%" > </ td > < td width ="23%" > 和 </ td > </ tr > </ table > </ td > < td width ="34%" valign ="top" height ="52" onmouseover ="MouseOverFun2(this);" > < table border ="1" width ="100%" bgcolor ="#FF9966" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="21%" > 还是 </ td > < td width ="35%" > 护身符哈 </ td > < td width ="21%" > </ td > < td width ="23%" > 呵呵 </ td > </ tr > < tr > < td width ="21%" > ， </ td > < td width ="35%" > 和是是护 </ td > < td width ="21%" > </ td > < td width ="23%" > 和 </ td > </ tr > </ table > < table width ="100%" border ="1" bgcolor ="#FFFFCC" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" > < tr > < td width ="87" > 输多发 </ td > < td width ="115" > 嘎撒递归 </ td > </ tr > < tr > < td width ="87" > 嘎大嘎 </ td > < td width ="115" > 大幅度 </ td > </ tr > < tr > < td width ="87" > 过大撒 </ td > < td width ="115" > 嘎 </ td > </ tr > </ table ></ td > </ tr > </ table > </ body > </ html > 本文转自博客园执着的笨蛋的博客，原文链接： ，如需转载请自行联系原博主。
你可能感兴趣的文章
(转)韦东山linux学习笔记——ubuntu 9.10 软件源问题
查看>>
SQL错误
查看>>
还款计算-复式记账
查看>>
C# 利用性能计数器监控网络状态
查看>>
网络对抗技术作业一
查看>>
最短路(Floyd_Warshall) POJ 2240 Arbitrage
查看>>
select2使用
查看>>
POJ1816：Wild Words——题解
查看>>
12.使用default-Action配置统一访问
查看>>
mysql建表---级联删除
查看>>
分布式队列神器 Celery
查看>>
windows 允许其他电脑访问本地mysql数据库
查看>>
.Net进阶系列(21)-跨域请求
查看>>
标准输入的EOF
查看>>
如何使用Git命令将项目从github或者服务器上克隆下来
查看>>
cplusplus.com
查看>>
svg了解一下
查看>>
扑克游戏 模拟赛C组
查看>>
JUnit4 中@AfterClass @BeforeClass @after @before的区别对比
查看>>
jquery中的ajax参数说明
查看>>