⛺️第2期第4题：实现一个拖拽(兼容写法)

[lindaidai]

⛺️第2期第4题：实现一个拖拽(兼容写法)

[Turbo328]

box.onmouseup = function () { document.onmousemove = null; box.onmouseup = null;}
呆呆大佬，这里的mouseup事件的监听对象改成document会不会比较好呢？
如果是box的话，当鼠标超出box的范围，就无法监听到该事件并触发监听函数了；
场景是当按下鼠标拖拽box至超出页面范围（进入浏览器顶部菜单栏等等）并释放鼠标，然后再回到box中，会发现虽然鼠标处在释放的状态，但仍然可以拖拽box；
原因是鼠标并不是在box内部抬起的，所以并没有触发box的mouseup事件的监听函数，所以document的mousemove事件并没有移除。

[laibao101]

部分逻辑做了优化处理，整体没啥变化。

window.onload = function() {
  const $box = document.querySelector("#box");
  $box.addEventListener("mousedown", function onMouseDown(ev) {
    const { event = ev } = window;
    const distanceX = event.clientX - $box.offsetLeft;
    const distanceY = event.clientY - $box.offsetTop;

    document.addEventListener("mousemove", onMouseMove);
    function onMouseMove(eve) {
      const docEvent = eve || window.event;
      const left = inRange(
        docEvent.clientX - distanceX,
        0,
        document.documentElement.clientWidth - $box.offsetWidth
      );
      const top = inRange(
        docEvent.clientY - distanceY,
        0,
        document.documentElement.clientHeight - $box.offsetHeight
      );

      $box.style.left = `${left}px`;
      $box.style.top = `${top}px`;
    }

    $box.addEventListener("mouseup", onMouseUp);
    function onMouseUp() {
      document.removeEventListener("mousemove", onMouseMove);
      $box.removeEventListener("mouseup", onMouseUp);
    }
  });
};

function inRange(num, start, end) {
  let ret = num;
  ret = Math.max(ret, start);
  ret = Math.min(ret, end);

  return ret;
}

[LinDaiDai]

box.onmouseup = function () { document.onmousemove = null; box.onmouseup = null;}
呆呆大佬，这里的mouseup事件的监听对象改成document会不会比较好呢？
如果是box的话，当鼠标超出box的范围，就无法监听到该事件并触发监听函数了；
场景是当按下鼠标拖拽box至超出页面范围（进入浏览器顶部菜单栏等等）并释放鼠标，然后再回到box中，会发现虽然鼠标处在释放的状态，但仍然可以拖拽box；
原因是鼠标并不是在box内部抬起的，所以并没有触发box的mouseup事件的监听函数，所以document的mousemove事件并没有移除。

是的，感谢指出，我去本地试了确实这样效果会好一些，我修改一下。再次感谢😄