可拖拽布局组件

import React from ‘react‘;
import style from ‘./index.module.scss‘;

const icon = `<svg t="1587390375993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="893" width="200" height="200"><path d="M912 512c0 7.7-2.8 14.5-8.5 20.1L789.3 646.5c-5.6 5.6-12.4 8.5-20.1 8.5-7.7 0-14.5-2.8-20.1-8.5-5.6-5.6-8.5-12.3-8.5-20.1v-57.2H283.5v57.2c0 7.7-2.8 14.5-8.5 20.1-5.6 5.6-12.4 8.5-20.1 8.5-7.7 0-14.5-2.8-20.1-8.5L120.5 532c-5.6-5.6-8.5-12.3-8.5-20.1 0-7.7 2.8-14.5 8.5-20.1l114.3-114.3c5.6-5.6 12.3-8.5 20.1-8.5 7.7 0 14.5 2.8 20.1 8.5 5.6 5.6 8.5 12.4 8.5 20.1v57.2h457.2v-57.2c0-7.7 2.8-14.5 8.5-20.1 5.6-5.6 12.3-8.5 20.1-8.5 7.7 0 14.5 2.8 20.1 8.5l114.4 114.3c5.4 5.7 8.2 12.5 8.2 20.2z" p-id="894"></path></svg>`;

export default (props: {

    /**  初始左侧宽度 */
    initLeftConnWidth?: number;

    /** 左侧显示对象 */
    liftChild: React.ReactChild;

    /** 右侧显示对象 */
    rightChild: React.ReactChild;
}) => {

    const [leftConnWidth, setLeftConnWidth] = React.useState(props.initLeftConnWidth || 200)

    const onMouseDownAdjust = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

        const oldScreenX = e.screenX;
        const oldWidth = leftConnWidth;
        const mask = document.createElement(‘div‘);
        mask.className = style.shelfMask;
        
        window.top.document.body.appendChild(mask);

        mask.addEventListener(‘mousemove‘, onmousemove);
        mask.addEventListener(‘mouseup‘, onmouseup);

        /** 移动鼠标 */
        function onmousemove(e1) {
            let newWidth = oldWidth + (e1.screenX - oldScreenX);
            if (newWidth < 0) {
                newWidth = 0;
            }
            if (newWidth > 1000) {
                newWidth = 1000;
            }
            setLeftConnWidth(newWidth);
        }

        function onmouseup() {
            mask.removeEventListener(‘mousemove‘, onmousemove);
            mask.removeEventListener(‘mouseup‘, onmouseup);
            window.top.document.body.removeChild(mask);
        }
    }

    return (
        <div className={style.shelf} >
            <div className={style.leftConn} style={{ width: leftConnWidth }} >
                {props.liftChild}
            </div>
            <i className={style.adjust} dangerouslySetInnerHTML={{ __html: icon }} onMouseDown={onMouseDownAdjust} ></i>
            <div className={style.rightConn} >
                {props.rightChild}
            </div>
        </div>
    )
}