利用面向对象实现点击，区域移动

HTML代码：

<div id="div1"></div><!--移动区域-->

css样式：

  html,body{
    margin: 0;
    padding: 0;
  }
  #div1{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #000;
  }

JS逻辑代码：

  class Drag {
    constructor(id) {
      this.oDiv = document.querySelector(id) // 当前的元素
      this.disX = 0
      this.disY = 0
      this.init()
    }
    init() {
      this.oDiv.onmousedown = function(ev) { // 元素内按下鼠标
        this.disX = ev.clientX - this.oDiv.offsetLeft // 点击的那个点横坐标-元素距离左侧的距离
        this.disY = ev.clientY - this.oDiv.offsetTop

        document.onmousemove = this.fnMove.bind(this)
        document.onmouseup = this.fnUp.bind(this)

        return false
      }.bind(this)
    }
    fnMove(ev) {
      this.oDiv.style.left = ev.clientX - this.disX  + 'px'
      this.oDiv.style.top = ev.clientY - this.disY + 'px'
    }
    fnUp() {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
  new Drag('#div1')