下载组件dragm
npm install dragm -S
新建一个文件ModalDrag.js
import React from 'react';
import DragM from 'dragm';
export default class ModalDrag extends React.Component {
updateTransform = transformStr => {
this.modalDom.style.transform = transformStr;
};
componentDidMount() {
this.modalDom = document.getElementsByClassName(
"ant-modal-wrap" // modal的class是ant-modal-wrap
)[0];
}
render() {
const { title } = this.props;
return (
<DragM updateTransform={this.updateTransform}>
<div>{title}</div>
</DragM>
);
}
}
这样拖拽组件就封装好了
在其他组件中引入这个文件
import React from 'react';
import ModalDrag from './ModalDrag .js';
class Demonstration extends React.Component {
render(){
const title = <ModalDrag title="标题” />
return(
<Modal
title={title}
>
</Modal>
)
}
}
这样就可以实现模态框的拖动效果了