javascript实现行拖动的方法
本文实例讲述了javascript实现行拖动的方法。分享给大家供大家参考。具体如下:
<!doctypehtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>行拖动</title> <script> window.onload=function(){ //绑定事件 varaddEvent=document.addEventListener?function(el,type,callback){ el.addEventListener(type,callback,!1); }:function(el,type,callback){ el.attachEvent("on"+type,callback); } //判定对样式的支持 vargetStyleName=(function(){ varprefixes=['','-ms-','-moz-','-webkit-','-khtml-','-o-']; varreg_cap=/-([a-z])/g; functiongetStyleName(css,el){ el=el||document.documentElement; varstyle=el.style,test; for(vari=0,l=prefixes.length;i<l;i++){ test=(prefixes[i]+css).replace(reg_cap,function($0,$1){ return$1.toUpperCase(); }); if(testinstyle){ returntest; } } returnnull; } returngetStyleName; })(); varuserSelect=getStyleName("user-select"); //精确获取样式 vargetStyle=document.defaultView?function(el,style){ returndocument.defaultView.getComputedStyle(el,null).getPropertyValue(style) }:function(el,style){ style=style.replace(/\-(\w)/g,function($,$1){ return$1.toUpperCase(); }); returnel.currentStyle[style]; } vardragManager={ y:0, dragStart:function(e){ e=e||event; varhandler=e.target||e.srcElement; if(handler.nodeName==="TD"){ handler=handler.parentNode; dragManager.handler=handler; if(!handler.getAttribute("data-background")){ handler.setAttribute("data-background",getStyle(handler,"background-color")) } //显示为可移动的状态 handler.style.backgroundColor="#ccc"; handler.style.cursor="move"; dragManager.y=e.clientY; if(typeofuserSelect==="string"){ returndocument.documentElement.style[userSelect]="none"; } document.unselectable="on"; document.onselectstart=function(){ returnfalse; } } }, draging:function(e){//mousemove时拖动行 varhandler=dragManager.handler; if(handler){ e=e||event; vary=e.clientY; vardown=y>dragManager.y;//是否向下移动 vartr=document.elementFromPoint(e.clientX,e.clientY); if(tr&&tr.nodeName=="TD"){ tr=tr.parentNode dragManager.y=y; if(handler!==tr){ tr.parentNode.insertBefore(handler,(down?tr.nextSibling:tr)); } }; } }, dragEnd:function(){ varhandler=dragManager.handler if(handler){ handler.style.backgroundColor=handler.getAttribute("data-background"); handler.style.cursor="default"; dragManager.handler=null; } if(typeofuserSelect==="string"){ returndocument.documentElement.style[userSelect]="text"; } document.unselectable="off"; document.onselectstart=null; }, main:function(el){ addEvent(el,"mousedown",dragManager.dragStart); addEvent(document,"mousemove",dragManager.draging); addEvent(document,"mouseup",dragManager.dragEnd); } } varel=document.getElementById("table"); dragManager.main(el); } </script> <style> .table{width:60%;border:1pxsolidred;border-collapse:collapse;} .tabletd{border:1pxsolidred;height:20px;} </style> </head> <body> <h1>行拖动</h1> <tableid="table"class="table"> <tbody> <tr><td>1</td><td>One</td><td>dom.require</td></tr> <trid="2"><tdclass="2">2</td><td>Two</td><td>ControlJS</td></tr> <trid="3"><tdclass="3">3</td><td>Three</td><td>HeadJS</td></tr> <trid="4"><tdclass="4">4</td><td>Four</td><td>LAB.js</td></tr> <trid="5"><tdclass="5">5</td><td>Five</td><td>$script.js</td></tr> <trid="6"><tdclass="6">6</td><td>Six</td><td>NBL.js</td></tr> </tbody> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。