拖拽修改宽度
<div className={styles.content}>
<Row>
<Col id="left" style={{ position: 'absolute', height: '100%', width: `${this.state.width}px` }}>
<div/> // 这里写内容
<div className={styles.dropLine} onMouseDown={this.handleMouseDown} /> 左侧线
</Col>
<Col className={styles.right} style={{ marginLeft: `${this.state.width}px` }}>
<div /> // 右边内容
</Col>
</Row>
</div>
handleMouseDown = () => {
document.ondragstart = (e) => {
e.preventDefault();
};
document.ondragend = (e) => {
e.preventDefault();
};
document.onmousemove = (ev) => {
const ele = document.getElementById('left');
const eve = ev || window.event;
const left = this.getOffsetPosition(ele);
const width = eve.clientX - left;
if (width >= 244 && width < 800) {
this.setState({
width,
});
}
document.onmouseup = () => {
document.onmousemove = null;
document.onmousedown = null;
};
};
}
getOffsetPosition = (ele, x) => {
const left = x || 0;
if (ele.offsetParent != null) {
return this.getOffsetPosition(ele.offsetParent, ele.offsetLeft + left);
}
return left;
}
.dropLine {
background: #e0e0e0;
width: 1px;
min-height: calc(~"100vh - 70px");
height: 100%;
top: 0px;
z-Index: 0;
right: 0px;
cursor: w-resize;
position: absolute;
}
.dropLine::after {
position: absolute;
left: -6px;
top: 0px;
height: 100%;
width: 14px;
content: '';
display: block;
}
