Open blparker opened 8 years ago
Same problem here, any resolution?
I guess I just found some clues, first you should put cancel prop in the draggable, like this
<Draggable bounds="parent" cancel=".react-resizable-handle">
Then you need to have a customised onResize function, which draws the resized box, like this:
onResize: function (event: Event, data: Object) {
let {element, size} = data;
let {width, height} = size;
let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
if (!widthChanged && !heightChanged) return;
//[width, height] = this.runConstraints(width, height);
console.log(width, height);
this.setState({width, height}, () => {
if (this.props.onResize) {
this.props.onResize(event, {element, size: {width, height}});
}
});
},
the Resizable component will be like this:
<div style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
text
</div>
This is very roughly implementation, I found the code in this link:
https://github.com/STRML/react-resizable/blob/master/lib/ResizableBox.jsx
Hey. I've just pushed #82 for this. Please check it out and let me know your comments. Cheers!
I reproduced my scenario in here.
I think it is a special case. I use Resizable inside a useDrag element (react-dnd). And when resizing, the drag event is propagates to the useDrag-element.
I tried to use e.stopPropagation(), but it didn't work. Then I gave e.preventDefault() a try and It worked !!
Anyone can help me know why?
Given the following code:
Where
<Draggable />
is the react-draggable module, when resizing using thereact-resizable-handle
, it also triggers the drag of the parent element. Is this an issue or is there a way to 'cancel' the resize from bubbling upwards to the parent draggable?