Javascript 反应-拖动元素的角以调整内容大小

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

我已经实现了在悬停时显示resize按钮，但是在实现resize功能时遇到了困难

为了便于参考，我附上了一张GIF，上面是我试图实现的东西。

---

如果您已经添加了一个“调整大小”按钮，该按钮位于要调整大小的

div

的角落：

收听按钮上的

mousedown

事件

在听众中，

• 添加跟踪增量X和Y移动的

  mousemove

  listener

  L

• 添加一个

  mouseup

  侦听器，在释放拖动时删除

  L

使用增量X和Y适当调整

div

的大小

例如：

从“@emotion/styled”导入样式
const Div=styled.Div`
宽度：${props=>props.width}；
高度：${props=>props.height}；
`;
可调整大小的函数（{children}）{
const[size，setSize]=useState（{x:400，y:300}）；
const ref=useRef（）；
const handler=useCallback（（）=>{
移动鼠标的功能（e）{
设置大小（currentSize=>（{
x:currentSize.x+e.movementX，
y:currentSize.y+e.movementY
}));
}
函数onMouseUp（）{
ref.current.removeEventListener（“mousemove”，onMouseMove）；
参考当前removeEventListener（“mouseup”，onMouseUp）；
}
ref.current.addEventListener（“mousemove”，onMouseMove）；
参考当前的addEventListener（“mouseup”，onMouseUp）；
}, []);
返回(
{儿童}
);
}

因此，您需要三条信息来完成此操作。鼠标第一次单击调整大小手柄时的位置、鼠标移动时的位置以及元素的高度和宽度

首先获取元素的高度和宽度：

const [height, setHeight] = useState({ height: 20 }); // initialise to 20px
const [dragging, setDragging] = useState(false);
/** -- snip -- **/
<img style={{ height }} /* snip */ />

然后您需要监听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>

{
如果（拖动）{
常量像素差=Math.max（mouseStart.x-e.offsetX，mouseStart.y-e.offsetY）；
设置高度（高度+像素差）；
}
}}
onMouseUp={（）=>setDraging（false）}
>

向我们展示您的尝试。我能想到的唯一问题是，你在hover上显示了resize按钮，当你从中拖出时，没有更多的悬停，因为你离开了框架，你的resize按钮不见了。

  <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>