通過第三方插件實現(xiàn)
https://www.npmjs.com/package/dragm
使用方法:
npm install dragm -S
2.安裝后運行如果出現(xiàn)缺少.less眷蜈,則在命令行>yarn install(或直接運行 yarn)织堂,然后再運行
3.新建一個文件ModalDrag.js
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>
);
}
}
4.這樣拖拽組件就封裝好了署隘,在其他組件中引入這個文件
import ModalDrag from './ModalDrag .js';
class Demonstration extends React.Component {
render(){
const title = <ModalDrag title="標題” />
return(
<Modal
title={title}
>
</Modal>
)
}
}