Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
57
rated 0 times [  64] [ 7]  / answers: 1 / hits: 20451  / 6 Years ago, sat, march 24, 2018, 12:00:00

I would like to have the material ui drawer's width resizable through a draggable handle.
My current approach is to have a mousevent listener on the whole app which checks if handle was pressed and updates the width according to mouse position on every mouse move.



This however requires a constant mouseevent listener on the whole app which seems to be overkill for a simple resize feature.



Are there better/ recommended ways of doing the resize?


More From » reactjs

 Answers
14

You can use indicator dragger with mousedown on it.



Here for example



// styles
dragger: {
width: '5px',
cursor: 'ew-resize',
padding: '4px 0 0',
borderTop: '1px solid #ddd',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
zIndex: '100',
backgroundColor: '#f4f7f9'
}

...

state = {
isResizing: false,
lastDownX: 0,
newWidth: {}
};

handleMousedown = e => {
this.setState({ isResizing: true, lastDownX: e.clientX });
};

handleMousemove = e => {
// we don't want to do anything if we aren't resizing.
if (!this.state.isResizing) {
return;
}

let offsetRight =
document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
let minWidth = 50;
let maxWidth = 600;
if (offsetRight > minWidth && offsetRight < maxWidth) {
this.setState({ newWidth: { width: offsetRight } });
}
};

handleMouseup = e => {
this.setState({ isResizing: false });
};

componentDidMount() {
document.addEventListener('mousemove', e => this.handleMousemove(e));
document.addEventListener('mouseup', e => this.handleMouseup(e));
}

...

<Drawer
variant=permanent
open
anchor={'right'}
classes={{
paper: classes.drawerPaper
}}
PaperProps={{ style: this.state.newWidth }}
>
<div
id=dragger
onMouseDown={event => {
this.handleMousedown(event);
}}
className={classes.dragger}
/>
{drawer}
</Drawer>


The idea is, when click the dragger, it will resize width Drawer followed mouse move.



Play DEMO.


[#54866] Tuesday, March 20, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
marcos

Total Points: 331
Total Questions: 106
Total Answers: 104

Location: Gabon
Member since Sat, Jul 25, 2020
4 Years ago
marcos questions
Thu, Feb 24, 22, 00:00, 2 Years ago
Sat, Apr 17, 21, 00:00, 3 Years ago
Mon, Feb 1, 21, 00:00, 3 Years ago
Tue, Jan 26, 21, 00:00, 3 Years ago
Wed, Jan 6, 21, 00:00, 3 Years ago
;