如果您已經(jīng)添加了一個(gè)固定在要調(diào)整大小的角上的調(diào)整大小按鈕div：
監(jiān)聽(tīng)mousedown按鈕上的事件
在聽(tīng)者中，
使用光標(biāo)位置的變化來(lái)div適當(dāng)?shù)卣{(diào)整大小。
例子：
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>
請(qǐng)注意，只有mousedown事件應(yīng)用于button，而其他處理程序應(yīng)用于document.body。這可確?？焖賹⒐鈽?biāo)移離button不會(huì)導(dǎo)致錯(cuò)過(guò)事件。
