antd modal新增可拖动功能

import React from 'react'
import {Modal} from "antd";
class Com extends React.Component{
    constructor(){
        super();
        this.simpleClass=Math.random().toString(36).substring(2);
        this.init=false;
    }
    move=event=>{
        const {top,left,right,bottom,width,height}=this.contain.getBoundingClientRect();
        const {limit=false}=this.props;
        this.contain.style.top=top event.movementY "px";
        this.contain.style.left=left event.movementX "px";
        if(limit){
            if(bottom event.movementY>window.innerHeight)this.contain.style.top=window.innerHeight-height "px";
            if(top event.movementY<0)this.contain.style.top=0;
            if(right event.movementX>window.innerWidth)this.contain.style.left=window.innerWidth-width "px";
            if(left event.movementX<0)this.contain.style.left=0;
        }
    }
    removeMove=()=>{
        window.removeEventListener("mousemove",this.move,false);
    }
    removeUp=()=>{
        document.body.onselectstart=()=>true;
        this.removeMove();
    }
    toTop=()=>{
        let autoIndexArr=document.getElementsByClassName("autoIndex");
        if(autoIndexArr.length<1) return false;
        let max=0;
        for(let i=0;i<autoIndexArr.length;i  ){
            let zIndex=parseInt(autoIndexArr[i].style.zIndex||1000);
            if(zIndex>max) max=zIndex;
        }
        this.contain.style.zIndex=max 1;
    }
    create=(visible)=>{
        if(this.init) return false;
        const {title,dragable=true,limit=false,autoIndex=true,style={}}=this.props;
        if(title&&dragable&&visible){
            this.init=true;
            setTimeout(() => {
                this.contain=document.getElementsByClassName(this.simpleClass)[0];
                if(!autoIndex){
                    this.contain=this.contain.getElementsByClassName("ant-modal")[0];
                    this.contain.style.paddingBottom=0;
                    this.contain.style.display="inline-block";
                }else{
                    this.contain.style.right="auto";
                    this.contain.style.overflow="visible";
                    this.contain.style.bottom="auto";
                    this.contain.style.left=typeof(style.left)==="number"?style.left "px":style.left;
                    this.contain.style.top=typeof(style.top)==="number"?style.top "px":style.top;
                    this.contain.addEventListener("mousedown",this.toTop,false);
                    this.toTop();
                }
                this.header=this.contain.getElementsByClassName("ant-modal-header")[0];
                this.header.style.cursor="all-scroll";
                this.header.onmousedown=()=>{
                    document.body.onselectstart=()=>false;
                    window.addEventListener("mousemove",this.move,false);
                }
                window.addEventListener("mouseup",this.removeUp,false);
            },0);
        }
    }
    componentDidMount(){
        this.create(this.props.visible);
    }
    componentWillReceiveProps({visible}){
        if(visible&&(visible!==this.props.visible)){
            this.create(visible);
            this.contain&&this.toTop();
        };
    }
    componentWillUnmount(){
        this.removeMove();
        window.removeEventListener("mouseup",this.removeUp,false);
    }
    render(){
        const {children,wrapClassName="",limit=false,dragable=true,mask,autoIndex=true,style,...other}=this.props;
        return <Modal {...other} 
            wrapClassName={`${wrapClassName} ${this.simpleClass} ${autoIndex&&"autoIndex"||""}`}
            mask={autoIndex?false:mask}
            style={autoIndex&&{
                top:0,
                left:0,
                width:"auto",
                height:"auto",
                paddingBottom:0,
                display:"inline-block"
            }||style}
        >
            {children}
        </Modal>
    }
}
export default Com;

在蚂蚁金服的antd库的modal组件上，新增可拖动功能，完全复用antd-modal的全部api，支持同时打开多个窗口

新增以下三个api

1.dragable

类型boolean,是否可拖动，默认true,开启此项后，首次位置水平方向不再居中，要手动设置初始位置
2.limit

类型boolean,是否限制不能移出屏幕，默认false
3.autoIndex

类型boolean,是否自动置顶，点击窗口时此窗口置于最高层，开启此项时，mask会失效，新打开的窗口会自动置顶
使用方法

下载库中的Modal.js，放到自己的项目中，此文件依赖antd，如未安装antd，则无法使用该组件

转载于dsmelon/antd-modal-dragable

这篇好文章是转载于：学新通技术网