要实现antd Modal的拖动功能 其他方法

除了react-draggable库，还有其他方法可以实现antd Modal的拖动功能。

一种方法是使用CSS的transform属性。首先，在Modal组件中添加一个ref属性：

<Modal ref={node => this.modal = node} {...this.props} />

然后，在componentDidMount方法中获取Modal的DOM节点，并为其添加鼠标事件监听器：

componentDidMount() {
  const modalHeader = this.modal && this.modal.getElementsByClassName('ant-modal-header')[0];
  if (modalHeader) {
    modalHeader.style.cursor = 'move';
    modalHeader.addEventListener('mousedown', this.handleMouseDown);
  }
}

handleMouseDown = e => {
  const modal = this.modal && this.modal.getElementsByClassName('ant-modal-wrap')[0];
  if (modal) {
    this.startX = e.clientX - modal.offsetLeft;
    this.startY = e.clientY - modal.offsetTop;
    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('mouseup', this.handleMouseUp);
  }
};

handleMouseMove = e => {
  const modal = this.modal && this.modal.getElementsByClassName('ant-modal-wrap')[0];
  if (modal) {
    modal.style.left = `${e.clientX - this.startX}px`;
    modal.style.top = `${e.clientY - this.startY}px`;
  }
};

handleMouseUp = () => {
  document.removeEventListener('mousemove', this.handleMouseMove);
  document.removeEventListener('mouseup', this.handleMouseUp);
};

这样就可以使用鼠标拖动Modal了。

另一种方法是使用react-dnd库。首先，安装react-dnd和react-dnd-html5-backend：

npm install react-dnd react-dnd-html5-backend

然后创建一个DraggableModal组件：

import React from 'react';
import { Modal } from 'antd';
import { DragSource, DragPreviewImage } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const modalSource = {
  beginDrag(props) {
    return {
      left: props.x,
      top: props.y,
    };
  },
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
  };
}

class DraggableModal extends React.Component {
  render() {
    const { connectDragSource, connectDragPreview, isDragging } = this.props;
    return (
      <div style={{ opacity: isDragging ? 0.5 : 1 }}>
        <DragPreviewImage connect={connectDragPreview} src="" />
        {connectDragSource(
          <div style={{ position: 'absolute', left: this.props.x, top: this.props.y }}>
            <Modal {...this.props} />
          </div>
        )}
      </div>
    );
  }
}

export default DragSource('modal', modalSource, collect)(DraggableModal);

最后，在父组件中使用DraggableModal组件，并使用DndProvider组件包裹：

import React from 'react';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import DraggableModal from './DraggableModal';

class App extends React.Component {
  state = {
    showModal: false,
    x: 100,
    y: 100,
  };

  handleShowModal = () => {
    this.setState({ showModal: true });
  };

  handleCancel = () => {
    this.setState({ showModal: false });
  };

  handleMouseMove = e => {
    this.setState({ x: e.clientX, y: e.clientY });
  };

  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        <div onMouseMove={this.handleMouseMove}>
          <button onClick={this.handleShowModal}>Show Modal</button>
          {this.state.showModal && (
            <DraggableModal
              x={this.state.x}
              y={this.state.y}
              title="Basic Modal"
              visible={this.state.showModal}
              onCancel={this.handleCancel}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </DraggableModal>
          )}
        </div>
      </DndProvider>
    );
  }
}

export default App;

这样就可以使用鼠标拖动Modal了。