js实现鼠标拖拽

主要原理：

   1、当鼠标按下时，记录鼠标坐标，用到的是 onmousedown；

   2、当鼠标移动时，计算鼠标移动的坐标之差，用到的是 onmousemove；

   3、当鼠标松开时，清除事件，用到的是 onmouseup；

 

了解的知识：

   1、div 的 offsetLeft 与 style.left 的区别：

        http://longxu1314.blog.163.com/blog/static/2112990412013101814844444/

 

效果图如下：

 

突然发现有没有效果图都一样哈哈，不说废话了，上代码：

html代码：

<! DOCTYPE  html>
< html >
< head >
    < meta  charset = "utf8" >
    < title >js拖拽效果</ title >
    < style  type = "text/css" >
    #div1 {
        width : 200px;
        height: 200px;
        position: absolute;
        background: #99dd33;
        cursor: move;
    }
    </ style >
</ head >
< body >
    < div  id = "div1" ></ div >
</ body >
< script  type = "text/javascript" >
    // js代码
</ script >
</ html >

 

js代码：

window.onload   function () {
    var  disX = disY = 0;                          // 鼠标距离div的左距离和上距离
    var  div1 = document.getElementById( "div1" );   // 得到div1对象

    // 鼠标按下div1时
    div1.onmousedown =  function (e) {
        var  evnt = e || event;                    // 得到鼠标事件
        disX = evnt.clientX - div1.offsetLeft;    // 鼠标横坐标 - div1的left
        disY = evnt.clientY - div1.offsetTop;     // 鼠标纵坐标 - div1的top

        // 鼠标移动时
        document.onmousemove =  function (e) {
            var  evnt = e || event;
            var  x = evnt.clientX - disX;
            var  y = evnt.clientY - disY;
            var  window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
            var  window_height = document.documentElement.clientHeight - div1.offsetHeight;

            x = ( x < 0 ) ? 0 : x;                           // 当div1到窗口最左边时
            x = ( x > window_width ) ? window_width : x;     // 当div1到窗口最右边时
            y = ( y < 0 ) ? 0 : y;                           // 当div1到窗口最上边时
            y = ( y > window_height ) ? window_height : y;   // 当div1到窗口最下边时

            div1.style.left = x +  "px" ;
            div1.style.top  = y +  "px" ;
        };

        // 鼠标抬起时
        document.onmouseup =  function () {
            document.onmousemove = null ;
            document.onmouup =  null ;
        };

        return  false ;
    };
};