JavaScript--拖拽原理

拖拽雏形：
html+css 代码：

<style>
#box{
  position: absolute;
  left:0;
  top:0;
  width:200px;
  height:200px;
  background: red;
}
</style>
<div id ="box"></div>

window.onload = function () {
  var elBox = document.getElementById('box');
  elBox.onmousedown = function (e) {
    var oEvent = e || event;
    var disX = oEvent.clientX - elBox.offsetLeft;
    var disY = oEvent.clientY - elBox.offsetTop;

    elBox.onmousemove = function(e) {
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      elBox.style.left = l + 'px';
      elBox.style.top = t + 'px';
    }

    elBox.onmouseup = function () {
      elBox.onmousemove = null;
      elBox.onmouseup = null;
    }
  } 
}

问题：如果鼠标拖的快点，会发现鼠标从div出去后，这个时候div不会跟着鼠标走。
原因：mousemove的事件是加在div上的，所以鼠标一旦脱离了div,那么这个时候mousemove就触发不了了
解决方法：onmousemove加在document上

window.onload = function () {
  var elBox = document.getElementById('box');
  elBox.onmousedown = function (e) {
    var oEvent = e || event;
    var disX = oEvent.clientX - elBox.offsetLeft;
    var disY = oEvent.clientY - elBox.offsetTop;

    document.onmousemove = function(e) {
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      elBox.style.left = l + 'px';
      elBox.style.top = t + 'px';
    }

    elBox.onmouseup = function () {
      document.onmousemove = null;
      elBox.onmouseup = null;
    }
  } 
}

拖拽改进版1：
基于上面代码，问题又出现了
问题：拖动鼠标时，鼠标不在div上的时候，我抬起了鼠标，但是当我再回来之后，div还会跟着动
原因：和上面的问题一样
解决方法：

window.onload = function () {
  var elBox = document.getElementById('box');
  elBox.onmousedown = function (e) {
    var oEvent = e || event;
    var disX = oEvent.clientX - elBox.offsetLeft;
    var disY = oEvent.clientY - elBox.offsetTop;

    document.onmousemove = function(e) {
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      elBox.style.left = l + 'px';
      elBox.style.top = t + 'px';
    }

    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  } 
}

拖拽改进版2：
基于上面的代码，我们再看看浏览器的兼容性问题
问题：在火狐浏览器中，如果div下面有其他元素的时候，点击拖动时，会选中下面的元素
原因：触发了鼠标的默认事件
解决方法：去掉默认事件，但是在哪个事件中加了？拖拽是在nomousedown开始的，当鼠标按下的时候，拖拽就开始了。所以要加在onmousedown中。

window.onload = function () {
  var elBox = document.getElementById('box');
  elBox.onmousedown = function (e) {
    var oEvent = e || event;
    var disX = oEvent.clientX - elBox.offsetLeft;
    var disY = oEvent.clientY - elBox.offsetTop;

    document.onmousemove = function(e) {
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      elBox.style.left = l + 'px';
      elBox.style.top = t + 'px';
    }

    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    }

    return false;
  } 
}

拖拽改进版3：
基于上面的代码，看看在IE浏览器中兼容性
问题：在低版本的IE中，当div被拖出浏览器窗口时，会出现滚动条
原因：低版本IE的bug
解决方法：使用ie浏览器独有的2个方法：setCapture() 和 releaseCapture()方法

window.onload = function () {
  var elBox = document.getElementById('box');
  elBox.onmousedown = function (e) {
    var oEvent = e || event;
    var disX = oEvent.clientX - elBox.offsetLeft;
    var disY = oEvent.clientY - elBox.offsetTop;

    document.onmousemove = function(e) {
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      elBox.style.left = l + 'px';
      elBox.style.top = t + 'px';
    }

    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      elBox.releaseCapture && elBox.releaseCapture();
    }
    elBox.setCapture && elBox.setCapture();
    return false;
  } 
}

再送网友一套移动端拖拽代码：

window.onload = function () {
  var oBox = document.getElementById('box');
  oBox.addEventListener('touchstart', function (e) {
    var disX = e.targetTouches[0].pageX - oBox.offsetLeft();
    var disY = e.targetTouches[0].pageY - oBox.offsetTop();

    function move (e) {
      oBox.style.left = e.targetTouches[0].pageX - disX + 'px';
      oBox.style.top = e.targetTouches[0].pageY - disY + 'px';
    }
    function end (e) {
      oBox.removeEventListener('touchmove', move, false);
      oBox.removeEventListener('touchend', end, false);
    }

    oBox.addEventListener('touchmove', move, false);
    oBox.addEventListener('touchend', end, false);
  });
}

JavaScript--拖拽原理

推荐阅读更多精彩内容