web拖动Drag&Drop原理

< html >
< head >
< title > PageTitle </ title >
< style > ...

.drag{...}{
cursor:move;
}



.box{...}{
margin:0px;
width:200px;
border:1pxsolid#ccc;
}
.boxh3.title{...}{
margin:0px;
width:100%;
background-color:#ccc;
}
.boxdiv.content{...}{
margin:0px;
width:100%;
text-align:left;
}
</ style >

< script type ="text/javascript" > ...
//GreatGhoul
//兼容ff,ie
//要拖动的对象的title设置为'dragable'
//拖动点的class设置为'drag'，拖动点必须为可拖动对象的子节点

varDragableObj=...{
handle:null,
dx:0,
dy:0,

init:function(e)...{
e=e||event;
this.handle=e.target||e.srcElement;
if(this.handle.className.indexOf('drag')==-1)return;
while(this.handle.tagName!='HTML'&&this.handle.title!="dragable")...

{
this.handle=this.handle.parentNode||this.handle.parentElement;
}
if(this.handle.title!='dragable')return;
this.handle.style.position='relative';
this.dx=parseInt(this.handle.style.left+0)-e.clientX;
this.dy=parseInt(this.handle.style.top+0)-e.clientY;
document.onmousemove=DragableObj.drag;
},
drag:function(e)...{
e=e||event;
if(this.handle!=null)...{
this.handle.style.left=(e.clientX+this.dx)+'px';
this.handle.style.top=(e.clientY+this.dy)+'px';
}
},
drop:function(e)...{
this.handle=null;
document.onmousemove=null;
}
};
document.onmousedown=DragableObj.init;
document.onmouseup=DragableObj.drop;
document.onselectstart=function(e)...{
e=e||event;
eo=e.target||event.srcElement;
if(eo.className.indexOf('drag')!=-1)returnfalse;
};

</ script >
</ head >
< body >
< br > 例１：
< div class ="box" title ="dragable" >
< h3 class ="dragtitle" >拖动标题 </ h3 >
< div class ="content" >内容 </ div >
</ div >

< br > 例２：
< div class ="drag" title ="dragable" > 拖动我 </ div >

</ body >
</ html >