js实现div拖拽

css JavaScript

我们在制作网页时，有时会用到div的拖拽。今天我们来详细的讲一讲如何用js实现div拖拽。

html部分

<div id="box">
    <div id="bar">可拖拽头部</div>
    <div id="content">这里是内容</div>
</div>

css部分

* {
margin: 0;
padding: 0;
}

#box {
    position: absolute;
    top: 100px;
    left: 200px;
    width: 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;
}        

因为我们实现的样式比较简单所以在这里html部分与css部分就不详细讲解了。
js代码部分

要实现div拖拽主要需要三个事件:

1. mousedown鼠标按下事件
2. mousemove鼠标移动事件
3. mouseup鼠标按键抬起事件

首先我们需要获得元素的css属性值:

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

在这里我们定义了一个名为getCss的函数来获得元素的css属性值。在这个函数里面我们用了一个getComputedStyle方法。这个getComputedStyle方法返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。在这里我们不做详细描述。
关于getComputedStyle方法，可以参考获取元素CSS值之getComputedStyle方法熟悉

然后我们先初始化需要的变量：

  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);

在这里我们用到了addEventListener这个函数。关于addEventListener函数详情参考：addEventListener详解。所以说上述代码的结果是当鼠标按下时在冒泡阶段执行这个函数。执行结果是在让dragable = true的同时，把鼠标指针向对于浏览器页面（或客户区）的水平和竖直坐标分别赋值给initX与initY。

当鼠标按下并且移动的时候我们需要执行：

    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";
            }
       });

上述代码执行的结果是：当鼠标按下并移动我们所操作的元素的位置也跟随鼠标移动。
原理:先判断鼠标是否按下，如果按下就把当前鼠标指针向对于浏览器页面（或客户区）的水平和竖直坐标分别赋值给nowX与nowY.然后求得鼠标两次的位置差。再把元素以前的坐标加上鼠标的位置差得到现在元素应该在的位置。

当鼠标按键抬起的时候：

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

在这里最重要的一步是让dragable = false;这样无论鼠标怎么移动元素的位置都不会要什么改变。

最后将上面三步的代码写在同一个函数里面，并调用这个函数。完整代码如下：

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"));

关于querySelector()方法，详情参考：DOM API querySelector与querySelectorAll的用法

这样我们就实现div的拖拽。