Skip to main content

有边界

<div id="drag"></div>
#drag {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
}
var drag = document.getElementById("drag");
var toggle = false;
var lastX;
var lastY;

// 点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
drag.onmousedown = function (e) {
  // 兼容ie浏览器
  var e = e || window.event;

  lastX = e.clientX;
  lastY = e.clientY;
  toggle = true;
};

document.onmousemove = function (e) {
  if (toggle === true) {
    // 移动距离
    var diffX = e.clientX - lastX;
    var diffY = e.clientY - lastY;
    // 起始位置(获取最新位置)
    var left = parseInt(drag.style.left) || 0;
    var top = parseInt(drag.style.top) || 0;
    // 计算位置
    var resultX = diffX + left;
    var resultY = diffY + top;
    // 设置边界
    if (resultX < 0) {
      resultX = 0;
    } else if (resultX > window.innerWidth - drag.offsetWidth) {
      resultX = window.innerWidth - drag.offsetWidth;
    }
    if (resultY < 0) {
      resultY = 0;
    } else if (resultY > window.innerHeight - drag.offsetHeight) {
      resultY = window.innerHeight - drag.offsetHeight;
    }
    drag.style.left = resultX + "px";
    drag.style.top = resultY + "px";
    // 更新起始位置
    lastX = e.clientX;
    lastY = e.clientY;
  }
};

document.onmouseup = function () {
  toggle = false;
};

参考​