import React from 'react';
import ReactDOM from 'react-dom';
import DragObj from './drag';

//main_class和title_class都是類名
export const DragHoc = (InnerComponent,main_class,title_class) =>
? class extends React.Component {
? ? componentDidMount() {
? ? ? this.init();
? ? }

? ? init = () => {
? ? ? setTimeout(() => {
? ? ? ? const child_node = ReactDOM.findDOMNode(this.refs.child); //獲取到原生的dom元素
? ? ? ? if (child_node) {
? ? ? ? ? this.drag_obj = new DragObj(
? ? ? ? ? ? main_class?child_node.querySelector(`.${main_class}`):child_node, //只拖拽類名為 ${main_class} 的div
? ? ? ? ? ? title_class?child_node.querySelector(`.${title_class}`):child_node //當(dāng)鼠標(biāo)按在類名為 ${title_class} 的div上時才允許拖拽
? ? ? ? ? );
? ? ? ? }
? ? ? }, 0);
? ? };

? ? componentWillUnmount() {
? ? ? if (this.drag_obj) {
? ? ? ? this.drag_obj.destory();
? ? ? }
? ? }

? ? render() {
? ? ? return <InnerComponent {...this.props} ref="child" />;
? ? }
? };

export default class DragObj {
? start_x0 = 0;
? start_y0 = 0;
? start_x1 = 0;
? start_y1 = 0;
? state = false; //記錄鼠標(biāo)按鍵是否松開
? delta_x = 0; //相對于原始位置的橫向偏移量
? delta_y = 0; //相對于原始位置的縱向偏移量

? constructor(target, move_item) {
? ? this.target = target; //被移動的dom元素
? ? this.move_item = move_item; //接受觸發(fā)移動行為的dom元素,一般為模態(tài)框的頭部
? ? this.init();
? }

? init() {
? ? this.move_item.style.cursor = 'move';
? ? this.bindEvent();
? }

? destory() {
? ? this.move_item.removeEventListener('mousedown', this.moveStartFun);
? ? document.removeEventListener('mousemove', this.movingFun);
? ? document.removeEventListener('mouseup', this.moveEndFun);
? }

? bindEvent() {
? ? this.moveStartFun = this.moveStart.bind(this);
? ? this.movingFun = this.moving.bind(this);
? ? this.moveEndFun = this.moveEnd.bind(this);
? ? this.move_item.addEventListener('mousedown', this.moveStartFun);
? ? document.addEventListener('mousemove', this.movingFun);
? ? document.addEventListener('mouseup', this.moveEndFun);
? }

? moveStart(e) {
? ? e.stopPropagation();
? ? this.state = true; //檢測鼠標(biāo)是否處于按下的狀態(tài)
? ? this.start_x0 = e.pageX;
? ? this.start_y0 = e.pageY;
? }

? moving(e) {
? ? //鼠標(biāo)移動時的默認(rèn)操作
? ? e.stopPropagation();
? ? e.preventDefault();
? ? if (!this.state) {
? ? ? return false;
? ? }

? ? this.start_x1 = e.pageX;
? ? this.start_y1 = e.pageY;
? ? this.render();
? }

? moveEnd(e) {
? ? if (!this.state) {
? ? ? return false;
? ? }
? ? this.state = false;
? ? this.delta_x = this.start_x1 - this.start_x0 + this.delta_x;
? ? this.delta_y = this.start_y1 - this.start_y0 + this.delta_y;
? }

? render() {
? ? this.target.style.transform = `translate(${
? ? ? this.start_x1 - this.start_x0 + this.delta_x
? ? }px,${this.start_y1 - this.start_y0 + this.delta_y}px)`;
? }
}

import { DragHoc } from "./index.js";
import ToastExport from "../components/ToastExport/index.js";
//引入靜態(tài)的模態(tài)框組件(用戶自已定義的模態(tài)框組件)
const ToastExportv2 = DragHoc(ToastExport,"ant-modal-content","ant-modal-header"); 
//生成了具備拖拽功能的模態(tài)框組件

const { visible } = this.props; ?//visible控制顯示隱藏模態(tài)框
{visible?<ToastExportv2 visible={visible}/>:null}