在React Draggable上调整大小

Question

Im使用React Draggable

我添加了一个调整大小手柄来调整对象的大小，但事件在调整大小时没有选择u，而是一直移动对象。

我强制显示这个的大小调整手柄

resize:both;
overflow:auto; 

这是该对象的一个示例。

<Draggable onDrag={this.handleDrag} bounds="body"   {...dragHandlers}>
<div
id='bed-wall-1'
className="bed-wall"
style={{width:'10px', height:'230px', position: 'absolute', top: '250px', left: '50px'}}
>
&nbsp;
</div>
</Draggable>

除非有办法为Draggable做到这一点，否则我不确定如何实现这一点。

Answer 1

这是我的解决方案

function Modal() {
const [isDraggerDisabled, setIsDraggerDisabled] = React.useState(false)
React.useEffect(() => {
setIsDraggerDisabled(true)
const draggerTimeout = setTimeout(() => {
setIsDraggerDisabled(false)
}, 500)
return () => {
clearTimeout(draggerTimeout)
}
}, [myElement.current?.clientWidth, 
myElement.current?.clientHeight])
return (
<Draggable
disabled={isDraggerDisabled} 
onDrag={this.handleDrag} 
bounds="body"   
{...dragHandlers}>
<div 
ref={myElement}
id='bed-wall-1'
className="bed-wall"
style={{width:'10px', height:'230px', position: 
'absolute', top: '250px', left: '50px'}}
>
&nbsp;
</div>
</Draggable>
)
}

Answer 2

这是我的解决方案，非常有效。

<Draggable handle="strong" {...dragHandlers}
style={{ resize:both; overflow:auto; }}
>
<div className="box no-cursor">
<strong className="cursor"
style={{display: inline-block;
width: calc(100% - 10px); 
height: calc(100% - 10px);
}}
>Drag here</strong>
</div>
</Draggable>