react 可拖拽改变位置和大小的弹窗

一 目标

　最近,项目上需要一个可以弹出一个可以移动位置和改变大小的窗口,来显示一下对当前页面的一个辅助内容

二 思路

　1.之前写过一个antd modal的可移动弹窗但是毕竟不如自己写的更定制化,比如不需要显示遮罩层,但是移动的思想一致都是鼠标的按下和抬起事件以及坐标位置来计算改变弹窗位置.

　2.窗口的的小调节可以用css的resize属性,当然也可以自己写一个指定边框拖拽调整大小的功能,后期可能会更新

三 代码内容

　index.js

import React, { Component } from 'react'
import { Icon } from 'antd'
import style from './index.less'
class PopContainer extends Component {
    constructor(props) {
        super(props);
        this.windowH = document.body.clientHeight;
        this.windowW = document.body.clientWidth;
        this.state = {
            styleTop: 20,
            styleLeft: 10,
            styleHeight: props.height || this.windowH * 0.85,
            styleWidth: props.width || this.windowW * 0.45,
        }
    }
　　//计算是否超出屏幕
    InWindow = (left, top, startPosX, startPosY) => {
        let H = document.body.clientHeight;
        let W = document.body.clientWidth;
        if ((left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) ||
            (top < 20 && startPosY > top) || ((top > H - 20 && startPosY < top))) {
            return false
        }
        return true
    }
    onMouseDown = e => {
        e.preventDefault();
        let startPosX = e.clientX;
        let startPosY = e.clientY;
        const { styleLeft, styleTop } = this.state;
        document.body.onmousemove = e => {
            let left = e.clientX - startPosX + styleLeft;
            let top = e.clientY - startPosY + styleTop;
            if (this.InWindow(e.clientX, e.clientY, startPosX, startPosY)) {
                this.setState({
                    styleLeft: left,
                    styleTop: top,
                })
            } else {
                document.body.onmousemove = null;
                document.body.onmouseup = null;
            }
        };
        document.body.onmouseup = function () {
            document.body.onmousemove = null;
            document.body.onmouseup = null;
        };
    };
    render() {
        const { styleLeft, styleTop, styleHeight, styleWidth } = this.state
        const { visible, onClose, children, bodyStyle, title } = this.props
        return <div className={style.popContainer} style={{
            display: visible ? "block" : "none",
            left: styleLeft + 'px', top: styleTop + 'px',
        }}>
            <div className={style.header}>
                <div className={style.title} onMouseDown={this.onMouseDown} >{title}</div>
                <span className={style.close} onClick={onClose}><Icon type="close" /></span>
            </div>
            <div className={style.content} style={{ ...bodyStyle }}>
                {children}
            </div>
            <div className={style.footer}>
            </div>
        </div>

    }
}

export default PopContainer;

 

index.less

.popContainer {
    position        : fixed;
    width           : 50vw;
    height          : 80vh;
    background-color: white;
    z-index         : 200;
    box-shadow      : 0px 4px 12px 0px rgba(0, 0, 0, 0.45);
    border-radius   : 4px;
    resize          : both;
    overflow        : auto;
    min-width       : 200px;
    min-height      : 60px;

    .header {
        padding      : 16px 24px;
        color        : rgba(0, 0, 0, 0.65);
        border-bottom: 1px solid #e8e8e8;
        border-radius: 4px 4px 0 0;

        .close {
            position   : absolute;
            top        : 0;
            right      : 0;
            cursor     : pointer;
            width      : 56px;
            height     : 56px;
            font-size  : 16px;
            line-height: 56px;
            text-align : center;
            color      : rgba(0, 0, 0, 0.45);

            &:hover {
                color: black;
            }
        }

        .title {
            cursor     : move;
            color      : rgba(0, 0, 0, 0.85);
            font-weight: 500;
            font-size  : 16px;
            line-height: 22px;
        }
    }

    .content {
        height    : calc(100% - 70px);
        overflow-y: scroll;
        padding   : 24px;
    }

}

引用的文件

 import PopContainer from './PopContainer/index.js'
  ...
 onShow = ()=>{
     this.setState({visible:true})
　}
 onClose=()=>{
    this.setState({visible:false})
 }
 render(){
      <Button  onClick={this.onShow}>打开弹窗</Button>
      <PopContainer  visible={this.state.visible} onClose={this.onClose} title="标题" >
 　　　　内容  
 　　　<PopContainer /> 
}