(十五)原生js案例之面向对象的拖拽及越界判断

业务中常见的拖拽功能，比如拖拽弹窗等业务的实现

效果

代码实现

• 必要的css

 *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100vh;
  }
  #drag {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
  }

• 面向过程的实现

window.onload = function () {
  oDrag = document.getElementById("drag");

  oDrag.onmousedown = function (e) {
    let ev = e || event;
    const disX = ev.clientX - oDrag.offsetLeft;
    const disY = ev.clientY - oDrag.offsetTop;
    document.onmousemove = function (e) {
      let ev = e || event;
      oDrag.style.left = ev.clientX - disX + "px";
      oDrag.style.top = ev.clientY - disY + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmousedown = null;
    };
    return false;
  };
};

• 面向对象的实现

window.onload = function () {
  const oBox = new Box();
  oBox.init();
};

function Box() {
  this.oDiv = document.getElementById("drag");
  this.disX = 0;
  this.disY = 0;
}

Box.prototype.init = function () {
  const _that = this;
  this.oDiv.onmousedown = function (e) {
    _that.fnDown(e);
  };
};

Box.prototype.fnDown = function (e) {
  let ev = e || event;
  const _that = this;
  this.disX = ev.clientX - this.oDiv.offsetLeft;
  this.disY = ev.clientY - this.oDiv.offsetTop;
  document.onmousemove = function (e) {
    _that.fnMove(e);
  };
  document.onmouseup = this.fnUp;
  return false;
};

Box.prototype.fnMove = function (e) {
  let ev = e || event;
  let l = ev.clientX - this.disX;
  let t = ev.clientY - this.disY;
  if (l < 0) {
    l = 0;
  }
  if (t < 0) {
    t = 0;
  }

  if (l >= document.body.clientWidth - this.oDiv.offsetWidth) {
    l = document.body.clientWidth - this.oDiv.offsetWidth;
  }
  if (t >= document.body.clientHeight - this.oDiv.offsetHeight) {
    t = document.body.clientHeight - this.oDiv.offsetHeight;
  }
  this.oDiv.style.left = l + "px";
  this.oDiv.style.top = t + "px";
};

Box.prototype.fnUp = function () {
  document.onmousemove = null;
  document.onmousedown = null;
};