js实现可拖拽的div

实现一个div可以被拖拽，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zzw_drap</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            position: absolute;
            top: 100px;
            left: 200px;
             500px;
        }
        #bar {
            padding-left:50px; 
            height: 50px;
            line-height: 50px;
            color: white;
            background-color: #aaa;
            cursor: move;
        }
        #content {
            padding:30px 0 0 50px ;
            height: 300px;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="bar">可拖拽头部</div>
        <div id="content">这里是内容</div>
    </div>

    <script>


    /*
    * zzw.drag 2017-3
    * js实现div可拖拽
    * @params bar 可以点击拖动的元素
    * @params box 拖动的整体元素 必须是position: absolute;
    * 思想：鼠标的clienX/clientY相对值设置为父元素的left/top的相对值
    */

    var dragBox = function (drag, wrap) {

       function getCss(ele, prop) {
            return parseInt(window.getComputedStyle(ele)[prop]);
       }

       var initX,
           initY,
           dragable = false,
           wrapLeft = getCss(wrap, "left"),
           wrapRight = getCss(wrap, "top");

       drag.addEventListener("mousedown", function (e) {
            dragable = true;
            initX = e.clientX;
            initY = e.clientY;
       }, false); 

      document.addEventListener("mousemove", function (e) {
            if (dragable === true ) {
                var nowX = e.clientX,
                    nowY = e.clientY,
                    disX = nowX - initX,
                    disY = nowY - initY;
                wrap.style.left = wrapLeft + disX + "px";
                wrap.style.top = wrapRight + disY + "px";
            }
       });

       drag.addEventListener("mouseup", function (e) {
            dragable = false;
            wrapLeft = getCss(wrap, "left");
            wrapRight = getCss(wrap, "top");
       }, false); 

    };

    dragBox(document.querySelector("#bar"), document.querySelector("#box"));
    </script>
</body>
</html>

其中我们可以直接使用封装好的函数，它接受两个参数，第一个是可以点击拖拽的元素，第二个是父元素。注意：父元素的postion设置为 absolute才可以使用。

2017年8月31日更新：

这里的mousemove的监听对象修改为了document，否则，如果我们拖拽速度太快，会出现bug，即可能鼠标脱离了wrap，然后这时就会出现问题，而如果修改为了document，问题几乎得到了解决。