在使用Modal组件时,新增了一个需求,让他能够实现拖拽的效果
1.首先找到控制modal的类名
让这个div框变为一个绝对定位,它默认是相对定位,然后可以给它一个高度,如果不给,就是我图中的样子了.在index.less文件里面给它样式,引入
index.less
.ant-modal-content{
position: absolute !important;
width: 480px;
}
2.封装一个drag.js
drag.js
class DragBox {
constructor() {
this.el = null;
}
init(cls) {
// this.el = document.getElementById(cls);
this.el = document.getElementsByClassName(cls)[0];
return this;
}
DragStart() {
this.el.onmousedown = (evt) => {
var e = evt || window.event;
var disX = e.pageX -this.el.offsetLeft;
var disY = e.pageY - this.el.offsetTop;
this.DragIng(disX, disY);
this.DragEnd()
}
}
DragIng(x, y) {
document.onmousemove = (evt) => {
var e = evt || window.event;
this.el.style.left = e.pageX - x + 'px';
this.el.style.top = e.pageY - y + 'px';
}
}
DragEnd() {
document.onmouseup=() => {
document.onmouseup = document.onmousemove = null;
}
}
}
export default new DragBox()
3.因为我组件内容是另外写在了一个js文件里面.在该js组件引入封装好的drag.js组件,并且调用
toast.js
import React, {
Component } from 'react'
import {
Input} from 'antd';
import Drag from './drag'
class Toast extends React.Component {
constructor() {
super()
}
componentDidMount=() => {
Drag.init("ant-modal-content").DragStart()
}
render() {
return (
<div>
<Input
placeholder="请输入"
style={
{
width: '150px' }}
/>
</div>
)
}
}
export default Toast
4.父组件代码如下
index.js
import React, {
Component } from 'react'
import {
Input, Modal } from 'antd';
import Toast from './toast'
import './index.less'
class Test extends React.Component {
constructor() {
super()
this.state = {
jobNumber: '',
visible: false
}
}
handleNumber = (e) => {
console.log(e.target.value)
this.setState({
jobNumber: e.target.value
})
}
handleChangeValue = () => {
this.setState({
visible: true
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false
});
};
render() {
return (
<div>
<Input onChange={
this.handleNumber}
placeholder="请输入"
style={
{
width: '150px' }}
value={
this.state.jobNumber}
/>
<button className="red"
onClick={
this.handleChangeValue}
type="primary"
// style={
{position:'absolute'}}
>
传值
</button>
<Modal
onCancel={
this.handleCancel}
onOk={
this.handleOk}
title="Basic Modal"
visible={
this.state.visible}
>
<Toast jobNumber={
this.state.jobNumber} ></Toast>
</Modal>
</div>
)
}
}
export default Test
然后就可以快乐的移动modal框了