React - 拖动元素的角以调整内容大小

Question

我正在开发我的 React 项目中的一项功能，当用户将鼠标悬停在可能包含图像或仅包含文本的元素上时，左上角会出现一个调整大小按钮，并且在拖动鼠标时按下该按钮将调整大小元素及其相应的内容。我已经实现了在悬停时显示调整大小按钮，但是在实现调整大小功能时遇到了困难。作为参考，我附上了我正在尝试实现的 GIF。 调整元素大小

Answer 1

如果您已经添加了一个固定在要调整大小的角上的调整大小按钮div：

1. 监听mousedown按钮上的事件

2. 在听者中，

• 存储起始尺寸和点击位置

• 添加一个mousemove监听onMouseMove器来document.body跟踪光标位置

• 添加一个监听器，当拖动被释放时mouseup移除mouseMove

3. 使用光标位置的变化来div适当地调整大小。

例子：

const { useState } = React;

function Resizeable({ children }) {

  const [size, setSize] = useState({ x: 400, y: 300 });

  const handler = (mouseDownEvent) => {

    const startSize = size;

    const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };

    

    function onMouseMove(mouseMoveEvent) {

      setSize(currentSize => ({ 

        x: startSize.x - startPosition.x + mouseMoveEvent.pageX, 

        y: startSize.y - startPosition.y + mouseMoveEvent.pageY 

      }));

    }

    function onMouseUp() {

      document.body.removeEventListener("mousemove", onMouseMove);

      // uncomment the following line if not using `{ once: true }`

      // document.body.removeEventListener("mouseup", onMouseUp);

    }

    

    document.body.addEventListener("mousemove", onMouseMove);

    document.body.addEventListener("mouseup", onMouseUp, { once: true });

  };

  return (

    <div id="container" style={{ width: size.x, height: size.y }}>

      <button id="draghandle" type="button" onMouseDown={handler} >Resize</button>

    </div>

  );

}

ReactDOM.render(<Resizeable />, document.getElementById("root"));

#root {

  height: 100vh;

  width: 100vw;

}

#container {

  position: relative;

  background-color: lightpink;

  border: solid red 1px;

}

#draghandle {

  position: absolute;

  bottom: 0;

  right: 0;

  transform: translate(50%, 50%);

}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

请注意，只有mousedown事件应用于button，而其他处理程序应用于document.body。这可确保快速将光标移离button不会导致错过事件。

Answer 2

所以你需要三个信息来做到这一点。鼠标第一次单击调整大小手柄时的位置、鼠标移动时的位置以及元素的高度和宽度。

从获取元素的高度和宽度开始：

const [height, setHeight] = useState({ height: 20 }); // initialise to 20px

const [dragging, setDragging] = useState(false);

/** -- snip -- **/

<img style={{ height }} /* snip */ />

有了图片，html会自动为你处理缩放，所以你只需要应用height属性，width就会自动缩放。

现在我们需要获取resize手柄的鼠标onClick的位置。我假设您已经有了手柄的样式，所以我们可以忽略它：

const [mouseStart, setMouseStart] = useState({ x: 0, y: 0 });

/** -- snip -- */

<ResizeHandle 

    onMouseDown={e => {

      setDragging(true);

      setMouseStart({ x: e.offsetX, y: e.offsetY });

    }}

/> 

然后你需要监听 mouseMove 事件并适当调整 img 的大小 - 这应该在父组件中完成：

  <div

     onMouseMove={e => {

        if (dragging) {

          const pixelDifference = Math.max(mouseStart.x - e.offsetX, mouseStart.y - e.offsetY);

          setHeight(height + pixelDifference);

        }

     }}

     onMouseUp={() => setDragging(false)}

  >

     <img /* snip */ />

     <ResizeHandle /* snip */ />

  </div>