Resize on React Draggable

user_2240163 0
Viewed 901

Im using React Draggable

I added a resize handle to be able to resize the object, but the event fails to pick u on the resizing, instead it keeps moving the object.

I force the show of the resize handle this

  resize:both;
  overflow:auto;

This is an example of the object.

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

Unless there is a way to do this for Draggable Im not sure how to achieve this.

jsx reactjs draggable
1 Answers

This was my solution for this

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>

 )
}
user_129649960
Related