管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js 表格拖拽效果实例代码 (IE only)

<!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>Table Test (I.E. Only)</title>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F*%E5%BE%97%E5%88%B0%E8%A1%A8%E6%A0%BC%E5%88%97*%2F%20%0D%0Afunction%20getCols(srcCellIndex%2Cobj)%20%7B%20%0D%0Aobj%20%3D%20typeof%20obj%20%3D%3D%3D%20'string'%20%3F%20document.getElementById(obj)%20%3A%20obj%3B%20%0D%0Avar%20s%20%3D%20''%3B%20%0D%0A%0D%0As%20%2B%3D%20'%3Ctr%3E%3Cth%20style%3D%5C%22font-size%3A12px%3Btext-align%3Acenter%3Bfont-weight%3Abold%3Bline-height%3A%2023px%3B'%20%0D%0As%20%2B%3D%20'border%3A%201px%20solid%20%2377ABF2%3Bheight%3A%2025px%3Bwhite-space%3A%20nowrap%3Bbackground-color%3A%23AEAEAE%3B%22%3E'%20%0D%0As%20%2B%3D%20obj.rows%5B0%5D.cells%5BsrcCellIndex%5D.innerHTML%20%2B%20'%3C%2Fth%3E%3C%2Ftr%3E'%3B%20%0D%0A%0D%0Afor(var%20i%20%3D%201%3Bi%20%3C%20obj.rows.length%3Bi%2B%2B)%20%7B%20%0D%0As%20%2B%3D%20'%3Ctr%3E%3Ctd%3E'%20%2B%20obj.rows%5Bi%5D.cells%5BsrcCellIndex%5D.innerHTML%20%2B%20'%3C%2Ftd%3E%3C%2Ftr%3E'%3B%20%0D%0A%7D%20%0D%0Areturn%20s%3B%20%0D%0A%7D%20%0D%0A%2F*%E5%BE%97%E5%88%B0%E8%A1%A8%E6%A0%BC*%2F%20%0D%0Afunction%20getTable(obj)%20%7B%20%0D%0Awhile(obj.tagName.toLowerCase()%20!%3D%20'table')%20%7B%20%0D%0Aobj%20%3D%20obj.parentElement%3B%20%0D%0A%7D%20%0D%0Areturn%20obj%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%E4%BA%A4%E6%8D%A2%E5%88%97*%2F%20%0D%0Afunction%20swapCol(srcCellIndex%2CdestCellIndex%2Cobj)%20%7B%20%0D%0Aobj%20%3D%20typeof%20obj%20%3D%3D%3D%20'string'%20%3F%20document.getElementById(obj)%20%3A%20obj%3B%20%0D%0Afor(var%20i%20%3D%200%3Bi%20%3C%20obj.rows.length%3Bi%2B%2B)%20%7B%20%0D%0Aobj.rows%5Bi%5D.cells%5BsrcCellIndex%5D.swapNode(obj.rows%5Bi%5D.cells%5BdestCellIndex%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20createDiv()%20%7B%20%0D%0Avar%20div%20%3D%20document.createElement('div')%3B%20%0D%0Adiv.style.cssText%20%2B%3D%20'border%3A1px%20dashed%20%23003F87%3Bbackground%3A%23FFFFFF%3Bcolor%3A%23DC8331%3Boverflow%3Ahidden%3B'%3B%20%0D%0Adiv.style.cssText%20%2B%3D%20'zIndex%3A10000%3Bposition%3Aabsolute%3Bfilter%3AAlpha(opacity%3D70)%3Bfont-size%3A12px%3B'%3B%20%0D%0Areturn%20div%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%E5%BE%97%E5%88%B0%E4%BA%8B%E4%BB%B6%E4%BF%83%E5%8F%91%E7%9A%84th%E5%85%83%E7%B4%A0*%2F%20%0D%0Afunction%20getThEl()%20%7B%20%0D%0Avar%20el%20%3D%20document.elementFromPoint(event.x%2Cevent.y)%3B%20%0D%0Aif(el.tagName.toLowerCase()%20%3D%3D%20'th')%20%7B%20%0D%0Areturn%20el%3B%20%0D%0A%7D%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%E5%BE%97%E5%88%B0%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BD%8D%E7%BD%AE*%2F%20%0D%0Afunction%20getObjPos(obj)%20%7B%20%0D%0Avar%20x%20%3D%20y%20%3D%200%3B%20%0D%0Aif(obj.getBoundingClientRect)%20%7B%20%0D%0Avar%20box%20%3D%20obj.getBoundingClientRect()%3B%20%0D%0Ax%20%3D%20box.left%20%2B%20Math.max(document.documentElement.scrollLeft%2Cdocument.body.scrollLeft)%20-%20document.documentElement.clientLeft%3B%20%0D%0Ay%20%3D%20box.top%20%2B%20Math.max(document.documentElement.scrollTop%2Cdocument.body.scrollTop)%20-%20document.documentElement.clientTop%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Awhile(obj%20!%3D%20document.body)%20%7B%20%0D%0Ax%20%2B%3D%20obj.offsetLeft%3B%20%0D%0Ay%20%2B%3D%20obj.offsetTop%3B%20%0D%0Aobj%20%3D%20obj.offsetParent%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20%7B%20'x'%3A%20x%2C'y'%3A%20y%20%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*%E5%BE%97%E5%88%B0%E9%BC%A0%E6%A0%87%E7%9A%84%E4%BD%8D%E7%BD%AE*%2F%20%0D%0Afunction%20getCurPos()%20%7B%20%0D%0Ae%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0Areturn%20e.pageX%20%3F%20%7B%20x%3A%20e.pageX%2Cy%3A%20e.pageY%7D%20%3A%20%7B%20x%3A%20e.clientX%20%2B%20document.documentElement.scrollLeft%20-%20%0D%0Adocument.documentElement.clientLeft%2Cy%3A%20e.clientY%20%2B%20document.documentElement.scrollTop%20-%20%0D%0Adocument.documentElement.clientTop%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20startSwap()%20%7B%20%0D%0Avar%20startEl%20%3D%20getThEl()%3B%20%0D%0Aif(typeof%20startEl%20%3D%3D%20'undefined')%20%0D%0Areturn%3B%20%0D%0Avar%20div%20%3D%20createDiv()%3B%20%0D%0Adocument.body.appendChild(div)%3B%20%0D%0Adiv.style.width%20%3D%20startEl.clientWidth%3B%20%0D%0Adiv.style.height%20%3D%20getTable(startEl).clientHeight%3B%20%0D%0Adiv.innerHTML%20%3D%20'%3Ctable%20class%3D%5C%22Shadow%5C%22%3E'%20%2B%20getCols(startEl.cellIndex%2CgetTable(startEl))%20%2B%20'%3C%2Ftable%3E'%3B%20%0D%0Adiv.style.left%20%3D%20getObjPos(startEl).x%20%2B%20'px'%3B%20%0D%0Adiv.style.top%20%3D%20getObjPos(startEl).y%20%2B%20'px'%3B%20%0D%0Adiv.style.display%20%3D%20'block'%3B%20%0D%0A%0D%0Avar%20isDragable%20%3D%20true%3B%20%0D%0Avar%20curX%20%3D%20getCurPos().x%3B%20%0D%0Avar%20curY%20%3D%20getCurPos().y%3B%20%0D%0Avar%20objX%20%3D%20getObjPos(div).x%3B%20%0D%0Avar%20objY%20%3D%20getObjPos(div).y%3B%20%0D%0A%0D%0Adiv.onmousemove%20%3D%20function()%20%7B%20%0D%0Aif(isDragable)%20%7B%20%0D%0Adiv.style.cssText%20%2B%3D%20'cursor%3Amove%3B'%3B%20%0D%0Adiv.style.left%20%3D%20getCurPos().x%20-%20curX%20%2B%20objX%20%2B%20'px'%3B%20%0D%0Adiv.style.top%20%3D%20getCurPos().y%20-%20curY%20%2B%20objY%20%2B%20'px'%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Adiv.onmouseup%20%3D%20function()%20%7B%20%0D%0AisDragable%20%3D%20false%3B%20%0D%0Adiv.style.display%20%3D%20'none'%3B%20%0D%0Avar%20endEl%20%3D%20getThEl()%3B%20%0D%0Aif(typeof%20endEl%20%3D%3D%3D%20'undefined')%20%7B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Avar%20srcCellIndex%20%3D%20startEl.cellIndex%3B%20%0D%0Avar%20destCellIndex%20%3D%20endEl.cellIndex%3B%20%0D%0AswapCol(srcCellIndex%2CdestCellIndex%2CgetTable(endEl))%3B%20%0D%0A%7D%20%0D%0A%2F*%E9%BC%A0%E6%A0%87%E7%A7%BB%E9%99%A4%E5%B1%82%EF%BC%8C%E4%BA%8B%E4%BB%B6%E5%8F%96%E6%B6%88*%2F%20%0D%0Adiv.onmouseout%20%3D%20function()%20%7B%20%0D%0AisDragable%20%3D%20false%3B%20%0D%0Adiv.style.display%20%3D%20'none'%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%3C%2Fscript%3E">

<style type="text/css"> 
body 
{ 
overflow: hidden; 
} 
.Shadow 
{ 
color: #FC8331; 
width: 100%; 
padding: 3px; 
font-family: Arial, "宋体"; 
font-size: 12px; 
font-weight: normal; 
line-height: 22px; 
border-collapse: collapse; 
border-right: 1px solid #0000; 
border-top: 1px solid #0000; 
border-left: 1px solid #0000; 
border-bottom: 1px solid #0000; 
} 
.Grid 
{ 
background-color: #ffffff; 
padding: 3px; 
font-family: Arial, "宋体"; 
font-size: 12px; 
font-weight: normal; 
line-height: 22px; 
color: #494949; 
text-decoration: none; 
border-collapse: collapse; 
border-right: 1px solid #2A8CBF; 
border-top: 1px solid #2A8CBF; 
border-left: 1px solid #2A8CBF; 
border-bottom: 1px solid #2A8CBF; 
} 
.GridHeader 
{ 
font-family: Arial, "宋体"; 
font-size: 12px; 
font-weight: bold; 
line-height: 23px; 
border: 1px solid #77ABF2; 
height: 25px; 
text-decoration: none; 
text-align: center; 
white-space: nowrap; 
color: #000000; 
} 
</style> 
</head> 
<body> 
<table id="table" width="90%" border="1" class="Grid"> 
<thead class="GridHeader"> 
<tr bgcolor="cccccc"> 
<th> 
<span>姓名</span> 
</th> 
<th> 
<span>性别</span> 
</th> 
<th> 
<span>年龄</span> 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 
周周 
</td> 
<td> 
F 
</td> 
<td> 
20 
</td> 
</tr> 
<tr> 
<td> 
达达 
</td> 
<td> 
M 
</td> 
<td> 
21 
</td> 
</tr> 
<tr> 
<td> 
黄宏 
</td> 
<td> 
M 
</td> 
<td> 
12 
</td> 
</tr> 
</tbody> 
<tfoot> 
</tfoot> 
</table> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(function()%20%7B%20%0D%0Avar%20ths%20%3D%20document.getElementsByTagName('th')%3B%20%0D%0Afor(var%20i%20%3D%200%3Bi%20%3C%20ths.length%3Bi%2B%2B)%20%7B%20%0D%0Aths%5Bi%5D.attachEvent('onmousedown'%2CstartSwap)%3B%20%0D%0A%7D%20%0D%0A%7D)()%3B%20%0D%0A%3C%2Fscript%3E">

</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程