设置元素可以移动,没有做边界限制

56 阅读1分钟
  //
  let boxDom = document.querySelector('dom');
  boxDom.ondragstart = function (ev) {
    ev.preventDefault();
  };
  boxDom.ondragend = function (ev) {
    ev.preventDefault();
  };
  var flag = false, offX, offY;
  boxDom.onmousedown = function (event) {
    let evt = event ;
    //方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
    offX = evt.clientX - window.getComputedStyle(boxDom, null)["left"].slice(0, -2);
    offY = evt.clientY - window.getComputedStyle(boxDom, null)["top"].slice(0, -2);
    flag = true;
  }
  boxDom.onmouseup = function () {
    flag = false;
  }
  document.addEventListener('mousemove', function (event) {
    if (flag) {
      let evt = event ;
      boxDom.style.left = evt.clientX - offX + "px";
      boxDom.style.top = evt.clientY - offY + "px";
    }
})