antd Modal组件拖动功能的一种实现方式

朴灿烈づ我的快乐病毒、 2024-03-30 10:39 78阅读 0赞

## 前言 ##

对于一些弹窗组件，其中一个比较高的使用场景是拖拽功能。然而如antd的`Modal`组件、element ui 的`Dialog`组件等等其他UI，自带的弹窗却原生不支持拖拽功能，却是一大遗憾。  
当然对于antd的`Modal`组件，官方文档给出了一种基于`react-draggable` 来实现拖拽的效果：[https://ant.design/components/modal-cn\#components-modal-demo-modal-render][https_ant.design_components_modal-cn_components-modal-demo-modal-render] 。  
下面给出一种基于`draggable`组件来实现拖拽效果的一种实现方法。

## 实现方法 ##

### 关于`draggable` ###

`draggable`给出的说明是：

> High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package.  
> 高性能、跨浏览器、实现拖拽效果全功能的轻量级（压缩后只有2k）无依赖js库。

Github地址：[https://github.com/bcherny/draggable][https_github.com_bcherny_draggable]  
我们可以通过`npm` 或者 `yarn`安装：

$ npm install draggable --save

`draggable`的具体使用方法可以参看Github库的Readme文档，在此不展开赘述。

### 集成`draggable` ###

antd `Modal`原生不支持拖拽，我们需要在`Modal`打开后，初始化`Draggable`组件。需要注意的是并不是每次`Modal`打开都需要初始化`Modal`，仅限于第一次打开`Modal`后进行初始化即可。具体代码如下：

import React from "react";
    import Draggable from "draggable";
    import {
         Button, Modal } from "antd";
    import {
         ModalProps } from "antd/lib/modal/Modal";
    
    interface IState {
        
      open: boolean;
      draggableInited: boolean; // draggable初始化标识
    }
    
    export default class DraggableModal extends React.Component<
      ModalProps,
      IState
    > {
        
      constructor(props: ModalProps | Readonly<ModalProps>) {
        
        super(props);
    
        this.state = {
        
          open: false,
          draggableInited: false
        };
      }
    
      showModal() {
        
        this.setState({
         open: true }, this.initDrag);
      }
    
      closeModal() {
        
        this.setState({
         open: false });
      }
    
      initDrag() {
        
        // 仅限于首次打开，进行初始化draggable操作
        if (!this.state.draggableInited) {
        
          // 目标为：Modal组件
          const ele = document.querySelector(".custom-draggable-modal");
          new Draggable(ele, {
        
            // 拖拽handle设置为Modal头部，不设置此参数表示整个Modal都可拖拽
            handle: document.querySelector(".ant-modal-header")
          });
          // 初始化完成后，对draggableInited置于true
          this.setState({
         draggableInited: true });
        }
      }
    
      render() {
        
        return (
          <div>
            <Button type="primary" onClick={
        () => this.showModal()}>
              Open Modal
            </Button>
            <Modal
              // 对Modal添加class：custom-draggable-modal
              className="custom-draggable-modal"
              open={
        this.state.open}
              onOk={
        () => this.closeModal()}
              onCancel={
        () => this.closeModal()}
              // Modal其他属性由父组件传入
              {
        ...this.props}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Modal>
          </div>
        );
      }
    }

### 实现效果 ###

具体实现效果如下：  
![拖拽效果][1bcf9822bc9a4593a0f53682f0220e42.gif_pic_center]  
详细代码请移步至codesandbox：[https://codesandbox.io/s/kind-thunder-nfu40p?file=/src/DraggableModal.tsx][https_codesandbox.io_s_kind-thunder-nfu40p_file_src_DraggableModal.tsx]

### 后记 ###

由于`draggable`是一个纯js实现库，不依赖于其他第三方库，所以`draggable`不仅仅用于react ui库，如：antd，也可用于vue/angular ui库如element ui等其他库，实现方法同上述例子类似，不展开来讲解。  
如有疑问，可以在评论区进行交流。也欢迎点赞⭐收藏 ：）

**拓展阅读：**

1.  [React + Router + Antd实现多标签页功能（具体代码实现）][React _ Router _ Antd]
2.  [el-table行拖拽排序效果的实现（基于sortablejs）][el-table_sortablejs]
3.  [React + Antd实现动态切换主题功能][React _ Antd]

[https_ant.design_components_modal-cn_components-modal-demo-modal-render]: https://ant.design/components/modal-cn#components-modal-demo-modal-render
[https_github.com_bcherny_draggable]: https://github.com/bcherny/draggable
[1bcf9822bc9a4593a0f53682f0220e42.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0be9951420db4784b1d3ca48b660c947.gif
[https_codesandbox.io_s_kind-thunder-nfu40p_file_src_DraggableModal.tsx]: https://codesandbox.io/s/kind-thunder-nfu40p?file=/src/DraggableModal.tsx
[React _ Router _ Antd]: https://blog.csdn.net/m0_58016522/article/details/127754129
[el-table_sortablejs]: https://blog.csdn.net/m0_58016522/article/details/127784778
[React _ Antd]: https://blog.csdn.net/m0_58016522/article/details/121751043