拖拽

JavaScript拖拽实现

背景

在学习开发了签名板之后，为了更加一步学习和理解事件的位置坐标这一块的知识点，自己用原生的js实现了一个可以拖拽的div框。

功能分析

首先，需要有一个可拖拽的对象，如图，一个比较简陋的拖拽框：

拖拽.png

在这个框中。我们只能在标题栏部分才可以进行拖拽，拖拽分为三步骤：

1、鼠标在标题栏部分按下后可以进行拖拽

2、移动按下的鼠标，拖拽框也会跟着移动

3、鼠标松开，拖拽结束。

功能实现

通过上述的功能分析，可以将功能分为mousedown,mousemove,mouseup三个部分。下面一步一步对拖拽功能进行分解。

变量初始化

下面代码为这个功能需要声明的对象和变量等

    var flag = false;  // flag用来标志鼠标是否在标题栏部分按下去
    var wrap = document.getElementById('wrap'); // 获取到整个拖拽框对象
    var head = document.getElementById('tzHead'); // 获取到拖拽框中标题栏对象

    var now = {
        x:'',
        y:''
    }; // 当前的鼠标位置

    var last = {
        x:'',
        y:''
    }; // 鼠标按下的时候的鼠标位置

    var initPosition = {
        x:'',
        y:''
    }; // 鼠标按下时的拖拽框相对偏移的位置

事件绑定

  head.addEventListener('mousedown',beginDrag,false);

  head.addEventListener('mousemove',drag,false);

  head.addEventListener('mouseup',endDrag,false);

方法实现

1、开始拖拽方法：

  function beginDrag(e) {
        flag = true;
        last.x = e.pageX;
        last.y = e.pageY;
        initPosition = {
            x: wrap.offsetLeft,
            y: wrap.offsetTop
        };
    }

2、拖拽方法：

function drag(e) {
        if (flag) {
            now = {
                x: e.pageX,
                y: e.pageY
            };
            wrap.style.left = parseInt(now.x) - parseInt(last.x) + parseInt(initPosition.x) + 'px';
            wrap.style.top = parseInt(now.y) - parseInt(last.y) + parseInt(initPosition.y) + 'px';
            return false;
        }
    }

3、结束拖拽

function endDrag(e) {
        flag = false;
}

问题

现在已经实现了最基本的拖拽功能。可是这时候会有一个问题，就是如果我们鼠标滑动的很快，就很容易鼠标从head区域出来，然后出来后松开鼠标，下次在head区域内不用点击就可以移动拖拽框，这样非常不友好。

优化

针对上面这种情况，在好好看了看代码后发现。下面这段代码是有问题的：

  head.addEventListener('mousedown',beginDrag,false);

  head.addEventListener('mousemove',drag,false);

  head.addEventListener('mouseup',endDrag,false);

对于鼠标按下事件，必须要绑定在head区域。可是拖拽事件和鼠标松开事件应该针对于整个文档。于是改为

  head.addEventListener('mousedown',beginDrag,false);

  document.addEventListener('mousemove',drag,false);

  document.addEventListener('mouseup',endDrag,false);

上述问题不存在了。

后续优化

对于代码功能而言已经完成了功能，但是代码质量需要很大程度的优化。