react-draggable实现Modal拖拽

antd4.x版本Modal才支持拖拽，因此4.x以下版本需要通过该依赖手动实现。

安装依赖

npm install react-draggable

自定义组件

/**
 * antd 3.x Modal不支持拖拽 后续如果升级antd版本 可以废弃该组件
 */
 import React, { Component } from "react";
 import { Button, Icon } from 'antd';
 import Draggable from 'react-draggable';
 require('./index.scss');

export default class index extends Component {
	constructor(props) {
    super(props);
    this.state = {
    };
  }

	render() {
		const {visible, title, handleOk, handleClose, children, showCacel, showOK} = this.props;
		if (!visible) return null;

		return (
			<>
				<div className="drag_modal_container">
					<div className="drag_modal_mask"></div>
					<div className="drag_modal_wrap">
						<Draggable handle='.drag-handler'>
							<div className="drag_modal">
								<div className="drag_modal_content">
									<button className="drag_modal_close">
										<span className="drag_modal_close_icon">
											<Icon type="close" onClick={handleClose}/>
										</span>
									</button>
									<div className="drag_modal_header drag-handler">
										<div className="drag_modal_title">{title}</div>
									</div>
									<div className="drag_modal_body">
										{children}
									</div>
									<div className="drag_modal_footer" hidden={!showCacel && !showOK}>
										<Button onClick={handleClose} hidden={!showCacel}>Cancel</Button>
										<Button type="primary" className="drag_right_button" onClick={handleOk} hidden={!showOK}>OK</Button>
									</div>
								</div>
							</div>
						</Draggable>
					</div>
				</div>
			</>
		)
	}
}

@import "./src/utils/globalCss/global.scss";
.p-detail-p-intro-box {
  border: 1px solid rgba(213, 220, 230, 1);
  box-shadow: 0px 2px 8px 0px rgba(190, 194, 206, 0.4);
  .p-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .p-name {
      .p-header-img {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        left: 0;
        top: 4px;
        margin-right: 6px;
        // border-radius: 50%;
        background-image: url("@/assets/icons/project-count.png");
        background-size: 100% 100%;
      }
    }
    .p-header-button {
      width: 70px;
      display: flex;
      align-items: center;
      .p-header-more {
        cursor: pointer;
      }
      .p-header-back {
        cursor: pointer;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background-color: #1296db;
        color: white;
        width: 20px;
        height: 20px;
      }
    }
  }
  .p-intro-body {
    padding: 20px 20px 20px 20px;
    display: flex;
    background-color: #fff;
    // align-items: center;
    flex-wrap: wrap;
		.p-intro-block {
			flex: 1;
			font-size: 14px;
			.p-intro-item {
				// width: 25%;
				// display: flex;
				font-size: 14px;
				margin-bottom: 10px;
				&:nth-child(2) {
					margin-top: 10px;
				}
				span {
					min-width: 70px;
					&:last-child {
						color: #1890ff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding-right: 30px;
					}
				}
			}
		}
  }

  .p-do-items {
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    .p-do-item {
      color: #666;
      font-size: 16px;
      cursor: pointer;
      margin: 0 5px 0 5px;

      &:hover {
        color: $cs-primary-color;
      }
    }
  }
}

.p-detail-p-task-box {
  border: 1px solid rgba(213, 220, 230, 1);
  box-shadow: 0px 2px 8px 0px rgba(190, 194, 206, 0.4);
  margin-top: 30px;

  .p-task-body {
    padding: 10px 20px;
  }

  .add-task {
    font-size: 14px;
    color: #fff;
    background: $cs-primary-color;
    border-radius: 5px;
    padding: 6px 16px;
  }

  .icon-static-code {
    background-image: url("./imgs/icon-static-code.png");
    background-size: 100% 100%;
  }

  .icon-compliance-code {
    background-image: url("./imgs/icon-compliance-code.png");
    background-size: 100% 100%;
  }

  .icon-dynamic-code {
    background-image: url("./imgs/icon-dynamic-code.png");
    background-size: 100% 100%;
  }

  .task-status-box {
    .ant-progress-inner {
      background: #dcdcdc;
    }
  }

  .task-action-box {
    .actionItem {
      font-size: 14px;
      // color: #666;
      color: #547FEF;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      &:hover {
        color: $cs-primary-color;
      }
    }
  }
}

.ant-table-row-expand-icon-cell {
  width: 5%;
}
.records-box {
  width: 93%;
  max-height: 190px;
  background-color: white;
  overflow: auto;
  box-shadow: 0 0 2px 1px #9dbdd1 inset;
  border-radius: 4px;
  padding-top: 20px;
  .records-items {
    display: flex;
    text-align: center;
    .records-type {
      width: 100px;
    }
    .records-time {
      width: 140px;
    }
    .records-startTime {
      width: 200px;
    }
    .records-endTime {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .records-tools {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 60px;
        .records-select {
          cursor: pointer;
          width: 14px;
          height: 14px;
          background-color: rgb(211, 216, 218);
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          margin-right: 30px;
          .records-icon {
            display: none;
          }
        }
        .records-views {
          cursor: pointer;
          &:hover {
            color: $cs-primary-color;
          }
        }
      }
    }
  }
}

.comparison-box {
  width: 770px;
  height: 370px;
  .popup-comparison {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    td {
      border: 2px solid #cde0dc;
      padding-left: 10px;
      height: 40px;
    }
  }
  .popup-newFind {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
.popup-close {
  bottom: 0;
  position: absolute;
  width: 80px;
  height: 30px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  // background-color: #1890ff;
  // background-image: linear-gradient(-180deg, #2ba3f8, #2889cf 90%);
  background-color: $cs-primary-color;
  left: 50%;
  margin-left: -40px;
  bottom: 16px;
  cursor: pointer;
  &:hover {
    background-color: $cs-primary-color-hover;
  }
}
.oldRecords {
  background-color: #ceae6b;
  color: white;
}
.newRecords {
  background-color: #8cbac6;
  color: white;
}
.spaceTd {
  width: 200px;
}
tr td:first-child {
  font-weight: bold;
}

.popup-newFind {
  margin-top: 190px;
  width: 100%;
  td {
    border: 2px solid #cde0dc;
    padding-left: 10px;
    height: 40px;
  }
}

#root .ant-table-tbody > tr.ant-table-expanded-row-level-1:nth-child(2n) {
  background-color: #eff1f5 !important;
}

// 只有静态代码需要展开
.noExpand {
  .ant-table-row-expand-icon {
    display: none;
  }
}

.urlTips {
  margin-left: 10px;
  font-size: 14px;
  color: #de2715;
  display: none;
  position: absolute;
  left: 23%;
  top: -24px;
}

.edit-header {
  width: 90%;
  height: 30px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  margin-left: 70px;
  padding-left: 30px;
  margin-bottom: 30px;
  .edit-section {
    padding: 0 20px;

    cursor: pointer;
    &.active {
      color: #1890ff;
      border-bottom: 3px solid #f9826c;
    }
  }
}

// 编辑页面更改后样式

.codingStandards {
  .row-input-item {
    label {
      width: 180px;
    }
    .ant-radio-wrapper {
      text-align: left;
    }
  }
}

.staticCode {
  .language-select {
    .ant-radio-wrapper {
      margin: 4px 0;
    }
    #language {
      .ant-radio-wrapper {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.dynamicCode {
  .row-input-item {
    label {
      width: 180px;
    }
    .ant-radio-wrapper {
      text-align: left;
    }
  }
}

.endTime {
  margin-left: 100px;
}

.spinBox {
  position: absolute;
  > div {
    z-index: 4;
  }
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.oldProjectName,
.newProjectName {
  overflow: hidden;
  text-overflow: ellipsis;
  //white-space: nowrap;
  word-wrap: break-word;
  word-break: break-all;
  width: 300px;
}

.reportTool {
  display: flex;
  justify-content: center;
  align-items: center;
  .sendEmail {
    color: $cs-primary-color;
    &:hover {
      color: #61b4af;
    }
  }
  .downLoadReport {
    color: $cs-primary-color;
    &:hover {
      color: #61b4af;
    }
  }
}

.log-Box {
  border: 1px solid $cs-primary-color-second;
  width: 100%;
  height: 400px;
  padding: 10px;
  background-color: black;
  overflow: auto;
  .log-item {
    font-size: 14px;
    color: #ccc;
    font-family: "Simsun";
  }
  :nth-last-child(2).success {
    color: #0dbc79;
  }
  .log-item.err {
    color: #ed6663;
  }
  .log-loading {
    animation: loading 3s infinite;
    overflow: hidden;
  }
}

@keyframes loading {
  0% {
    width: 3px;
  }

  20% {
    width: 12px;
  }
  40% {
    width: 22px;
  }

  60% {
    width: 32px;
  }

  80% {
    width: 42px;
  }

  100% {
    width: 52px;
  }
}

.emailSelectBox {
  padding-left: 10px;
  .emailSelect {
    border: 1px solid $cs-primary-color;
    border-radius: 4px;
    height: 300px;
    margin-bottom: 40px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 4px;
    }

    &:hover::-webkit-scrollbar-thumb {
      background: hsla(0, 0%, 53%, 0.4);
    }

    &:hover::-webkit-scrollbar-track {
      background: hsla(0, 0%, 53%, 0.1);
    }
    .contactEamli {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      cursor: pointer;
      position: relative;
      .checkBox {
        width: 100%;
        position: absolute;
        left: 0;
        text-align: right;
        padding-right: 10px;
      }
      &:hover {
        background-color: $cs-primary-color;
        color: white;
      }
    }
  }
}

.radio-ie {
  display: flex;
  .ant-radio {
    margin-top: 4px;
  }
  .ant-radio-checked::after {
    display: none;
  }
}

.edit-box {
  .popup-box {
    position: fixed;
  }
}

.nesting-table {
  .nesting-table-screen {
    margin-bottom: 10px;
    span {
      margin-right: 20px;
      cursor: pointer;
      &.active {
        color: #798fff;
      }
    }
  }
}

#root {
  .ant-table-tbody {
    tr.ant-table-expanded-row-level-1:nth-child(2n) {
      background-color: #fff !important;
    }
  }
}