web拖动Drag&Drop原理

< html >
< head >
< title > Page Title </ title >
< style > ...

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



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

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

var  DragableObj  =   ... {
    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 )  return   false ;
} ;

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

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

</ body >
</ html >