简单实现元素可拖动的效果

简单实现一个可拖动元素的效果，参考了了张鑫旭大神的代码。

需求说明

创建一个函数，接收两个参数，triggerElement和targetElement，即点击后触发拖动效果的元素和要拖动的元素。 当在triggerElement上点击鼠标时会触发拖动targetElement的效果，松开鼠标后不再拖动。

实现思路

1. 给触发拖动的元素添加点击事件监听函数；

2. 点击触发元素之后，在点击事件处理函数内部，为document添加鼠标移动(mousemove)的事件监听；

3. 还需要在松开鼠标后，停止拖动，所以需要为document添加鼠标松开(mouseup)的事件监听；

代码

• 先给触发元素添加点击事件

    function startDrag(triggerElement, targetElement) {
      triggerElement.addEventListener('mousedown', function (event) {
        var originMouseX, originMouseY, moveX, moveY;

        originMouseX = event.clientX
        originMouseY = event.clientY
        document.addEventListener('mousemove', mouseMove, false)
        document.addEventListener('mouseup', mouseUp, false)

        function mouseMove(event) {
          moveX = event.clientX - originMouseX
          moveY = event.clientY - originMouseY
          originMouseX = event.clientX
          originMouseY = event.clientY
          targetElement.style.left = +moveX + +targetElement.offsetLeft + 'px'
          targetElement.style.top = +moveY + +targetElement.offsetTop + 'px'
          // 防止选取文字
          event.preventDefault();
          triggerElement.onselectstart = function () {
            return false;
          }
        } // mouseMove end

        function mouseUp(event) {
          document.removeEventListener('mousemove', mouseMove, false)
          document.removeEventListener('mouseup', mouseUp, false)
        } // mouseUp end
      }, false)
    }

使用

和张鑫旭大神的一样，只需要调用这个函数，将两个元素:触发拖动的元素和被拖动的元素， 传进函数就可以了
PS:被拖动的元素需要设置绝对定位：position: absolute;