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程序设计有所帮助。