Ant中Modal组件实现可拖动/拖拽功能

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.stateif (flage) {let curX = e.clientX,curY = e.clientY,disX = curX - x,disY = curY - ythis.setState({cssleft: parseInt(left, 0) + disX,csstop: parseInt(top, 0) + disY,});}}mouseUp = (e) => {const dom = e.target.offsetParentthis.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.propsconst { csstop, cssleft, position } = this.stateconst newTitle = ({title});const newStyle = { ...style, marginTop: csstop || style.marginTop, marginLeft: cssleft || style.marginLeft, position, top: '0', left: '0' }const wrapclass = `dragmodal ${wrapClassName}`return ()}
}

样式代码：

 .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;}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！