最简洁的js鼠标拖曳效果【原】

请原谅我是一个标题档，不过还是很简洁的，因为只是初步的实现的拖曳效果

DOCTYPE html >
< html >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < meta  http-equiv ="Content-Language"  content ="zh-cn"   />
     < meta  http-equiv ="X-UA-Compatible"  content ="IE=EmulateIE7"   />
     < title > DragDrop title >
     < meta  name ="author"  content ="flowerszhong" >
     < meta  name ="date"  content ="" >
     < link  href =""  rel ="stylesheet"  type ="text/css"   />
    
    
     < style  type ="text/css" >
        .redBorderBox
         {
            border :  2px solid red ;
            position :  absolute ;
            width :  60px ;
            height :  60px ;
            cursor :  move ;
            background-color :  Red ;
         }
     style >
head >
< body >
     < div  id ="hd" >
     div >
     < div  id ="bd" >
         < div  class ="redBorderBox"  id ="dragObj1" >
            i am not dragObj div >
         < div  class ="redBorderBox dragObj"  id ="dragObj2"  style ="top: 90px; left: 90px;" >
            u can drag me div >
     div >
     < div  id ="ft" >
     div >
body >

< script >
     /*  鼠标拖动  */
    ( function () {
         var  oDrag  =   "" ;
         var  ox, oy, nx, ny, dy, dx;
         function  drag(e) {
             var  e  =  e  ?  e : event;
            oDrag  =  e.target  ?  e.target : e.srcElement;
             if  (oDrag.className.indexOf( " dragObj " )  ==   - 1 ) { oDrag  =   "" }
            ox  =  e.clientX;
            oy  =  e.clientY;
        }
         function  dragPro(e) {
             if  (oDrag  !=   "" ) {
                 var  e  =  e  ?  e : event;
                dx  =  parseInt(oDrag.style.left);
                dy  =  parseInt(oDrag.style.top);
                nx  =  e.clientX;
                ny  =  e.clientY;
                oDrag.style.left  =  (dx  +  (nx  -  ox))  +   " px " ;
                oDrag.style.top  =  (dy  +  (ny  -  oy))  +   " px " ;
                ox  =  nx;
                oy  =  ny;
            }
        }
        document.onmousedown  =   function (e) { drag(e); }
        document.onmouseup  =   function () { oDrag  =   "" ; }
        document.onmousemove  =   function (event) { dragPro(event); }
    })();
script >

html >

感谢你留言，转载请声明出处：http://www.cnblogs.com/flowerszhong

转载于:https://www.cnblogs.com/flowerszhong/archive/2011/08/16/2140491.html