Ant Design组件库中的Modal组件实现可拖动/拖拽功能封装的组件
实现功能:仅Modal的标题区域可拖拽,即实现了拖拽功能,又不影响弹窗内部交互操作。
js代码:
export default class DraggableModal extends React.Component {
constructor(props) {
this.state = {
top: 0,
left: 0,
csstop: 0,
cssleft: 0,
x: 0,
y: 0,
flage: false,
position: null,
}
}
mouseDown = (e) => {
let target = e.target,
_parent = target.offsetParent;
this.setState({
top: _parent.offsetTop,
left: _parent.offsetLeft,
csstop: _parent.offsetTop,
cssleft: _parent.offsetLeft,
x: e.clientX,
y: e.clientY,
flage: true,
position: 'fixed'
});
window.onmousemove = this.mouseMove;
}
mouseMove = (e) => {
const { flage, top, left, x, y } = this.state
if (flage) {
let curX = e.clientX,
curY = e.clientY,
disX = curX - x,
disY = curY - y
this.setState({
cssleft: parseInt(left, 0) + disX,
csstop: parseInt(top, 0) + disY,
});
}
}
mouseUp = (e) => {
const dom = e.target.offsetParent
this.setState({
flage: false,
top: dom.style.top,
left: dom.style.left,
});
window.onmousemove = null
}
componentWillUnmount() {
window.onmousemove = null
}
render() {
const { title, style = {}, wrapClassName, ...otherProps } = this.props
const { csstop, cssleft, position } = this.state
const newTitle = (
<div
className="dragtitle"
onMouseDown={this.mouseDown}
onMouseUp={this.mouseUp}
>
{title}
</div>
);
const newStyle = { ...style, marginTop: csstop || style.marginTop, marginLeft: cssleft || style.marginLeft, position, top: '0', left: '0' }
const wrapclass = `dragmodal ${wrapClassName}`
return (
<Modal {...otherProps} title={newTitle} style={newStyle} wrapClassName={wrapclass} maskClosable={false} />
)
}
}
样式代码:
.dragmodal{
.ant-modal-content{
position: static;
}
.dragtitle{
padding: 8px 24px;
cursor: move;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
}