鼠标拖动事件

方法	描述
querySelector	获取单个对象
addEventListener	添加事件监听
removeEventListener	移除事件监听（removeEventListener 需要实名的方法）
e.clientX，e.clientY	鼠标位置
e.offsetX，e.offsetY	鼠标距离当前点击元素的x y

var svgE = d.querySelector('svg') // 获取对象
 
// 鼠标按下事件
svgE.addEventListener('mousedown', mDown, false)
// 松开鼠标
svgE.addEventListener('mouseup', function () { 
  svgE.removeEventListener("mousemove", mMove, false)
  svgE.removeEventListener("mousemove", mDown, false)
})

// 鼠标按下方法
function mDown (e) { 
  this.initX = e.offsetX;
  this.initY = e.offsetY;
  svgE.addEventListener('mousemove', mMove, false) // 鼠标移动事件
}

// 鼠标移动方法
function mMove (e) {
  // 移动后的鼠标位置
  this.mouseMoveX = e.clientX
  this.mouseMoveY = e.clientY

  let left = this.mouseMoveX - this.initX
  let top = this.mouseMoveY - this.initY

  svgE.style.position = 'relative'
  svgE.style.left = left + "px";
  svgE.style.top = top + "px";
}