如何在容器内绑定可拖动的 div

Question

我正在使用带有 typescript 的 react，并在我的 react 应用程序中实现了 w3school 拖动 div 示例。现在，我试图将这个可拖动的 div 绑定在边界内。目前，我的盒子正在容器外移动。请帮助如何在不使用任何第三方库的情况下实现此目的。

这是我的沙盒demo

我的代码：

import "./styles.css";
import React, { useRef } from "react";

export default function App() {
  const dragRef = useRef<HTMLDivElement>(null);
  let pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;

  const drag = (event: any) => {
    const boundingBox = dragRef.current;

    if (boundingBox) {
      event = event || window.event;
      event.preventDefault();
      pos1 = pos3 - event.clientX;
      pos2 = pos4 - event.clientY;
      pos3 = event.clientX;
      pos4 = event.clientY;
      boundingBox.style.top = boundingBox.offsetTop - pos2 + "px";
      boundingBox.style.left = boundingBox.offsetLeft - pos1 + "px";
    }
  };

  const stop = () => {
    const boundingBox = dragRef.current;
    if (boundingBox) {
      boundingBox.onmouseup = null;
      boundingBox.onmousemove = null;
    }
  };

  const start = (event: any) => {
    const box = dragRef.current;
    if (box) {
      event = event || window.event;
      event.preventDefault();
      pos3 = event.clientX;
      pos4 = event.clientY;
      box.onmouseup = stop;
      box.onmousemove = drag;
    }
  };

  return (
    <div className="App">
      <div
        ref={dragRef}
        className="draggableDiv"
        onMouseDown={start}
        onMouseMove={drag}
        onMouseUp={stop}
      ></div>
    </div>
  );
}

以及外部 CSS 文件：

.App {
  font-family: sans-serif;
  height: 350px;
  width: 400px;
  background-color: rgb(132, 190, 241);
  position: relative;
}

.draggableDiv {
  position: absolute;
  height: 40px;
  width: 40px;
  background-color: red;
  cursor: grab;
}

Answer 1

您可以在可拖动区域保留另一个ref，并检查clientX 和clientY 是否在该范围内。

1. 创建另一个 ref 并附加到可拖动区域 div。

const dragAreaRef = useRef<HTMLDivElement>(null);
...
...
  return (
    <div className="App" ref={dragAreaRef}>
      ...
    </div>
  );

1. 更新drag 函数，如下所示。

  const drag = (event: any) => {
    const boundingBox = dragRef.current;

    const {
      left,
      right,
      top,
      bottom
    } = dragAreaRef.current?.getBoundingClientRect();

    if (boundingBox) {
      event = event || window.event;
      if (
        event.clientX > left &&
        event.clientX < right &&
        event.clientY > top &&
        event.clientY < bottom
      ) {
        event.preventDefault();
        pos1 = pos3 - event.clientX;
        pos2 = pos4 - event.clientY;
        pos3 = event.clientX;
        pos4 = event.clientY;
        boundingBox.style.top = boundingBox.offsetTop - pos2 + "px";
        boundingBox.style.left = boundingBox.offsetLeft - pos1 + "px";
      }
    }
  };