在 React Draggable 上调整大小

Question

我正在使用 React Draggable

我添加了一个调整大小的手柄以便能够调整对象的大小，但是事件无法在调整大小时选择你，而是继续移动对象。

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

  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>