物體的拖拽移動(dòng)，其實(shí)是觸發(fā)了三個(gè)鼠標(biāo)相關(guān)事件

• onmousedown 鼠標(biāo)按下事件
• onmousemove鼠標(biāo)移動(dòng)事件
• onmouseup 鼠標(biāo)抬起事件

拖拽的實(shí)現(xiàn)原理：
拖拽時(shí)，將被拖拽元素新位置的left和top重新賦值給被拖拽元素的left和top，覆蓋上一個(gè)位置的值,鼠標(biāo)按下是在元素內(nèi)部，所以還要減去鼠標(biāo)按下位置相對(duì)于元素內(nèi)部本身的left和 top值

<div id="move"></div>

var drag = document.getElementById('move')
drag.onmousedown = function (e) {
 //獲取鼠標(biāo)按下位置相對(duì)于元素內(nèi)部的x和y軸的偏移值
  var diffX = e.clientX - drag.offsetLeft
  var diffY = e.clientY - drag.offsetTop

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

    //阻止元素離開視窗范圍產(chǎn)生滾動(dòng)條
    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) {
    //鼠標(biāo)抬起后，取消按下和抬起事件
    this.onmousedown = null
    this.onmousemove = null
  }
}