原生js实现拖拽功能

物体的拖拽移动，其实是触发了三个鼠标相关事件

• onmousedown 鼠标按下事件
• onmousemove鼠标移动事件
• onmouseup 鼠标抬起事件

拖拽的实现原理：
拖拽时，将被拖拽元素新位置的left和top重新赋值给被拖拽元素的left和top，覆盖上一个位置的值,鼠标按下是在元素内部，所以还要减去鼠标按下位置相对于元素内部本身的left和 top值

var drag = document.getElementById('move')
drag.onmousedown = function (e) {
 //获取鼠标按下位置相对于元素内部的x和y轴的偏移值
  var diffX = e.clientX - drag.offsetLeft
  var diffY = e.clientY - drag.offsetTop

  document.onmousemove = function (e) {
  //元素本身相对于视窗的偏移值
    var left = e.clientX - diffX
    var top = e.clientY - diffY

    //阻止元素离开视窗范围产生滚动条
    if (left < 0) {
      left = 0
    } else if (left > window.innerWidth - drag.offsetWidth) {
      left = window.innerWidth - drag.offsetWidth
    }
    if (top < 0) {
      top = 0
    } else if (top > window.innerHeight - drag.offsetHeight) {
      top = window.innerHeight - drag.offsetHeight
    }

    //将新位置的left和top值赋值给元素
    drag.style.left = left + 'px'
    drag.style.top = top + 'px'
  }

  document.onmouseup = function (e) {
    //鼠标抬起后，取消按下和抬起事件
    this.onmousedown = null
    this.onmousemove = null
  }
}