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

Question

我正在开发我的 React 项目中的一项功能，当用户将鼠标悬停在可能包含图像或仅包含文本的元素上时，左上角会出现一个调整大小按钮，并且在拖动鼠标时按下该按钮将调整大小元素及其相应的内容。

我已经实现了在悬停时显示调整大小按钮，但是在实现调整大小功能时遇到了困难。

作为参考，我附上了我正在尝试实现的 GIF。 调整元素大小

Answer 1

如果您已经添加了一个固定在要调整大小的角上的调整大小按钮div：监听mousedown按钮上的事件在听者中，存储起始尺寸和点击位置添加一个mousemove监听onMouseMove器来document.body跟踪光标位置添加一个监听器，当拖动被释放时mouseup移除mouseMove使用光标位置的变化来div适当地调整大小。例子：const { useState } = React;function Resizeable({ children }) {&nbsp; const [size, setSize] = useState({ x: 400, y: 300 });&nbsp; const handler = (mouseDownEvent) => {&nbsp; &nbsp; const startSize = size;&nbsp; &nbsp; const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; function onMouseMove(mouseMoveEvent) {&nbsp; &nbsp; &nbsp; setSize(currentSize => ({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; x: startSize.x - startPosition.x + mouseMoveEvent.pageX,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; y: startSize.y - startPosition.y + mouseMoveEvent.pageY&nbsp;&nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; }&nbsp; &nbsp; function onMouseUp() {&nbsp; &nbsp; &nbsp; document.body.removeEventListener("mousemove", onMouseMove);&nbsp; &nbsp; &nbsp; // uncomment the following line if not using `{ once: true }`&nbsp; &nbsp; &nbsp; // document.body.removeEventListener("mouseup", onMouseUp);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.body.addEventListener("mousemove", onMouseMove);&nbsp; &nbsp; document.body.addEventListener("mouseup", onMouseUp, { once: true });&nbsp; };&nbsp; return (&nbsp; &nbsp; <div id="container" style={{ width: size.x, height: size.y }}>&nbsp; &nbsp; &nbsp; <button id="draghandle" type="button" onMouseDown={handler} >Resize</button>&nbsp; &nbsp; </div>&nbsp; );}ReactDOM.render(<Resizeable />, document.getElementById("root"));#root {&nbsp; height: 100vh;&nbsp; width: 100vw;}#container {&nbsp; position: relative;&nbsp; background-color: lightpink;&nbsp; border: solid red 1px;}#draghandle {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; right: 0;&nbsp; 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 20pxconst [dragging, setDragging] = useState(false);/** -- snip -- **/<img style={{ height }} /* snip */ />有了图片，html会自动为你处理缩放，所以你只需要应用height属性，width就会自动缩放。现在我们需要获取resize手柄的鼠标onClick的位置。我假设您已经有了手柄的样式，所以我们可以忽略它：const [mouseStart, setMouseStart] = useState({ x: 0, y: 0 });/** -- snip -- */<ResizeHandle&nbsp;&nbsp; &nbsp; onMouseDown={e => {&nbsp; &nbsp; &nbsp; setDragging(true);&nbsp; &nbsp; &nbsp; setMouseStart({ x: e.offsetX, y: e.offsetY });&nbsp; &nbsp; }}/>&nbsp;然后你需要监听 mouseMove 事件并适当调整 img 的大小 - 这应该在父组件中完成：&nbsp; <div&nbsp; &nbsp; &nbsp;onMouseMove={e => {&nbsp; &nbsp; &nbsp; &nbsp; if (dragging) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const pixelDifference = Math.max(mouseStart.x - e.offsetX, mouseStart.y - e.offsetY);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setHeight(height + pixelDifference);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; &nbsp;onMouseUp={() => setDragging(false)}&nbsp; >&nbsp; &nbsp; &nbsp;<img /* snip */ />&nbsp; &nbsp; &nbsp;<ResizeHandle /* snip */ />&nbsp; </div>