javascript - HTML元素拖动的约束问题

Question

我以限制是父容器的方式制作了用于在我的反应应用程序周围拖动元素的脚本。我实现了我想要的，但不是以我想要的方式。我希望当我达到限制时阻止该轴尝试更进一步，以避免脚本计算和返回 div 的这种烦人的影响。

const drag = (id) => {
    const element = document.getElementById(id);
    const parent = element.parentNode;

    let newState = { x: 0, y: 0 };
    let oldState = { x: 0, y: 0 };

    const dragElement = (e) => {
      e = e || window.event;
      e.preventDefault();
      oldState.x = e.clientX;
      oldState.y = e.clientY;
      document.onmouseup = stopDrag;
      document.onmousemove = startDrag;
    };

    const startDrag = (e) => {
      e = e || window.event;
      e.preventDefault();
      newState.x = oldState.x - e.clientX;
      newState.y = oldState.y - e.clientY;
      oldState.x = e.clientX;
      oldState.y = e.clientY;

      const handleX = () => {
        let x = 0;

        if (element.offsetLeft < 0) {
          x = 0;
        } else if (element.offsetLeft + element.offsetWidth > parent.offsetWidth) {
          x = parent.offsetWidth - element.offsetWidth;
        } else {
          x = element.offsetLeft - newState.x;
        }

        return `${x}px`;
      };

      const handleY = () => {
        let y = 0;

        if (element.offsetTop < 0) {
          y = 0;
        } else if (element.offsetTop + element.offsetHeight > parent.offsetHeight) {
          y = parent.offsetHeight - element.offsetHeight;
        } else {
          y = element.offsetTop - newState.y;
        }

        return `${y}px`;
      };

      element.style.top = handleY();
      element.style.left = handleX();
    };

    const stopDrag = () => {
      document.onmouseup = null;
      document.onmousemove = null;
    };

    if (document.getElementById(element.id + "Header")) {
      document.getElementById(element.id + "Header").onmousedown = dragElement;
    } else {
      element.onmousedown = dragElement;
    }
  };

drag("test");

.parent {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: 16px;
background: red;
}

.draggable {
position: absolute;
width: 50px;
height: 50px;
background: green;
}

<div class="parent">
  <div class="draggable" id="test"></div>
</div>

标签： javascripthtmlreactjs