TA貢獻1856條經驗 獲得超11個贊
如果您已經添加了一個固定在要調整大小的角上的調整大小按鈕div：
監聽mousedown按鈕上的事件
在聽者中，
存儲起始尺寸和點擊位置
添加一個mousemove監聽onMouseMove器來document.body跟蹤光標位置
添加一個監聽器，當拖動被釋放時mouseup移除mouseMove
使用光標位置的變化來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不會導致錯過事件。
TA貢獻1810條經驗 獲得超4個贊
所以你需要三個信息來做到這一點。鼠標第一次單擊調整大小手柄時的位置、鼠標移動時的位置以及元素的高度和寬度。
從獲取元素的高度和寬度開始：
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>
舉報