antd的Modal可移动(可拖拽)

通过第三方插件实现

https://www.npmjs.com/package/dragm

使用方法:

  1. npm install dragm -S

2.安装后运行如果出现缺少.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 (
      
        
{title}
); } }

4.这样拖拽组件就封装好了,在其他组件中引入这个文件

import ModalDrag from './ModalDrag .js';
class Demonstration extends React.Component {
    render(){
        const title = 

你可能感兴趣的:(antd的Modal可移动(可拖拽))