import React, { useState } from 'react' import { Modal } from 'antd' const Drag = (props) => { const [style, setStyle] = useState({ left: 0, top: 100 }) const inWindow = (left, top, startPosX, startPosY) => { const H = document.body.clientHeight; const W = document.body.clientWidth; if ( (left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) || (top < 20 && startPosY > top) || (top > H - 20 && startPosY < top) ) { document.body.onmousemove = null; document.body.onmouseup = null; return false; } return true; } const onMouseDown = (e) => { const startPosX = e.clientX; const startPosY = e.clientY; document.body.onmousemove = (e) => { const left = e.clientX - startPosX + style.left; const top = e.clientY - startPosY + style.top; if (inWindow(e.clientX, e.clientY, startPosX, startPosY)) { setStyle({ left, top }) } }; // 鼠标放开时去掉移动事件 document.body.onmouseup = function () { document.body.onmousemove = null; } } return ( <Modal getContainer={false} {...props} style={style} title={ <div style={{ width: '100%', cursor: 'move' }} onMouseDown={onMouseDown}> {props.title} </div> } > { props.children } </Modal> ) } export default Drag