react实现窗口悬浮框，可拖拽、折叠、滚动

1、效果如下

2、如下两个文件不需要修改

drag.js

import React from "react";
import PropTypes from "prop-types";export default class DragM extends React.Component {static propTypes = {children: PropTypes.element.isRequired};static defaultProps = {//默认是移动children dom,覆盖该方法，可以把tranform行为同步给外部updateTransform: (transformStr, tx, ty, tdom) => {tdom.style.transform = transformStr;}};position = {startX: 0,startY: 0,dx: 0,dy: 0,tx: 0,ty: 0};start = event => {if (event.button != 0) {//只允许左键，右键问题在于不选择conextmenu就不会触发mouseup事件return;}document.addEventListener("mousemove", this.docMove);this.position.startX = event.pageX - this.position.dx;this.position.startY = event.pageY - this.position.dy;};docMove = event => {const tx = event.pageX - this.position.startX;const ty = event.pageY - this.position.startY;const transformStr = `translate(${tx}px,${ty}px)`;this.props.updateTransform(transformStr, tx, ty, this.tdom);this.position.dx = tx;this.position.dy = ty;};docMouseUp = event => {document.removeEventListener("mousemove", this.docMove);};componentDidMount() {this.tdom.addEventListener("mousedown", this.start);//用document移除对mousemove事件的监听document.addEventListener("mouseup", this.docMouseUp);}componentWillUnmount() {this.tdom.removeEventListener("mousedown", this.start);document.removeEventListener("mouseup", this.docMouseUp);document.removeEventListener("mousemove", this.docMove);}render() {const {children} = this.props;const newStyle = {...children.props.style,cursor: "move",userSelect: "none"};return React.cloneElement(React.Children.only(children), {ref: tdom => {return (this.tdom = tdom);},style: newStyle});}
}

index.js

import React from "react";
import PropTypes from "prop-types";
import DragM from "./drag";
import {Modal} from "antd";class BuildTitle extends React.Component {updateTransform = transformStr => {this.modalDom.style.transform = transformStr;};componentDidMount() {const modalList = document.getElementsByClassName("ant-modal"); //modal的class是ant-modalthis.modalDom = modalList[modalList.length - 1];}render() {const {title} = this.props;return (<DragM updateTransform={this.updateTransform}><div>{title}</div></DragM>);}
}export default class DragModal extends React.Component {static propTypes = {drag: PropTypes.bool,destroyOnClose: PropTypes.bool};static defaultProps = {drag: true,destroyOnClose: true};render() {const {drag,visible,title,destroyOnClose,children,...restProps} = this.props;//是否可拖拽const _title =title && drag ? (<BuildTitle visible={visible} title={title}/>) : (title);return (<Modalvisible={visible}title={_title}destroyOnClose={destroyOnClose}{...restProps}>{children}</Modal>);}
}

3、如下两个文件，自己适当修改接口数据来源即可

index.js

import React from "react";
import styles from "./index.less";
import {Badge, Icon, Tabs} from "antd";
import DragModal from "../DragModal";
import classNames from 'classnames';
import NHFetch from "../../../../utils/NHFetch";const TabPane = Tabs.TabPane;export default class ModalContent extends React.Component {constructor(props) {super(props);this.state = {data: undefined,open: true};}componentDidMount() {this.getMessage();}componentDidUpdate(prevProps) {// 当props.params变化时获取新数据if (this.props.params !== prevProps.params) {console.log('----------------------------------------')this.getMessage();}}getMessage = () => {let xsid = this.props.paramsif (xsid) {NHFetch('api/zhxg-yxwz/shxd/getZzbdInfoList', 'get', {xsid: xsid}).then((res) => {if (res && res.code === 200) {this.setState({data: res.data});}})}}// 切换状态onChangeOpen = () => {this.setState({open: !this.state.open});};render() {const {data, open} = this.state;const {studentName} = this.propsreturn (<DragModalclassName={classNames({[styles.modalClese]: !open})}wrapClassName={styles.dragWrap}closable={false}width={300}title={<div>{studentName + "："}自助报道办理情况<divclassName={styles.modalBtn}onClick={this.onChangeOpen}>{open ? <Icon type="down"/> : <Icon type="up"/>}</div></div>}mask={false}visible={this.props.params}footer={false}><div className={styles.modalContent}>{data && data.map((item, i) => {return (<div key={i} className={styles.modalListHeader}><Badge status={item.BLZT === '1' ? "success" : "processing"}/>{item.HJMC + "  "}<span style={item.BLZT === '1' ? {color: "green"} : {color: 'red'}}>{item.BLZT === '1' ? '已办理' : "未办理"}</span></div>);})}</div></DragModal>);}
}

css文件,index.less

.box {background-color: #fff;.danger {color: #f5222d}.primary {color: #1990ff}
}/* 页签 */
.tabs {:global {.ant-tabs-bar {margin-bottom: 0;}.ant-tabs-tab {margin-right: 0;}.ant-badge {margin-left: 4px;margin-top: -4px;}.ant-badge-count {height: 16px;line-height: 16px;}.ant-badge-multiple-words {padding: 0 4px;}}.tabsExtra {:global {.ant-input {width: 270px;}.ant-btn {width: 80px;margin-left: 10px;}.ant-select-selection {border: none;box-shadow: none;}}}
}/* 菜单 */
.menuLayout {&:global(.ant-layout) {background: #fff;}:global {.ant-layout-sider {box-shadow: 2px 0 4px 0 rgba(217, 217, 217, 0.5);}.ant-layout-content {padding: 10px;}}
}.menu {padding: 10px 0;:global {.ant-menu-item {width: 100%;margin-top: 0;margin-bottom: 0 !important;&:after {right: inherit;left: 0;}}}
}/* 表格 */
.tableTop {overflow: hidden;.tableTopLeft {float: left;button {margin-right: 10px;}}.tableTopRight {float: right;}
}.table {margin-top: 10px;.audit {position: absolute;left: -70px;top: 50%;width: 80px;height: 56px;margin-top: -28px;pointer-events: none}:global {.ant-table-thead {position: relative;height: 50px;&:after {content: "";display: block;position: absolute;left: 0;right: 0;top: 42px;background-color: #fff;height: 10px;}tr {background: rgba(25, 144, 255, 0.2);&:first-child > th:first-child {border-top-left-radius: 0;}&:first-child > th:last-child {border-top-right-radius: 0;}}th {padding: 10px;height: 50px;padding-bottom: 20px;white-space: nowrap;}}.ant-table-tbody {border-left: 1px solid #e8e8e8;border-right: 1px solid #e8e8e8;tr:first-child td {border-top: 1px solid #e8e8e8;}tr > td {position: relative;&:after {content: "";position: absolute;right: 0;top: 16px;bottom: 16px;border-right: 1px solid #e8e8e8;}&:last-child,&:first-child {&:after {display: none;}}}}}
}.tablePage {overflow: hidden;margin-top: 10px;padding: 0 10px;.tablePageLeft {float: left;color: #999;line-height: 32px;}.tablePageRight {float: right;}
}/* 弹窗 */
.dragWrap {overflow: hidden;pointer-events: none;.modalBtn {position: absolute;top: 0;right: 0;height: 50px;width: 50px;text-align: center;line-height: 50px;cursor: pointer;user-select: none;}.modalClese {:global {.ant-modal-body {height: 0;}}}.modalContent {width: 300px;padding: 0 20px 10px 20px;}.modalListHeader {padding: 10px;}.modalListItem {position: relative;padding: 5px 30px 5px 23px;background-color: rgba(25, 144, 255, 0.05);border-radius: 8px;margin-bottom: 6px;}.modalItemBadge {position: absolute;left: 10px;top: 5px;}.itemInfo {font-size: 12px;color: #999;span {color: #1990ff;}}.modalItemIcon {position: absolute;right: 10px;top: 50%;margin-top: -15px;color: #1990ff;font-size: 20px;}:global {.ant-modal {position: absolute;top: auto;bottom: 0;right: 0;margin: 0;padding-bottom: 0;pointer-events: auto;}.ant-modal-header {padding: 14px 10px;background-color: #1990ff;.ant-modal-title {padding-right: 50px;color: #fff;font-size: 14px;}}.ant-modal-content {overflow: hidden;}.ant-modal-close {color: #fff;}.ant-modal-close-x {height: 50px;line-height: 50px;}.ant-modal-body {max-height: 350px;padding: 0;overflow: hidden;overflow-y: scroll;margin-right: -20px;transition: all 0.3s;}}
}

4、最后适当位置使用组件即可