react实现拖拽模态框

前言实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.本文使用的模态框由antdesign3.0的Modal组件封装而成,如何在不修改...

前言

实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.本文使用的模态框由 ant design 3.0 的 Modal 组件封装而成,如何在不修改原来代码的基础上实现拖拽呢.最终效果图如下:

实践

1.创建高阶组件DragHoc

新建文件ModalDrag/index.js,将下面代码copy进去

DragObj是具体拖拽的原生js代码,后面再看

拖拽一个元素通常需要传入两个参数.一个是推拽后能移动的区域,对应着上图中的整个导出表格控件,控件的类名为main_class.另外一个是监听拖拽的区域,对应着上图中的头部,只有当鼠标在头部按下时再移动才能拖动表格.头部的类名为title_class.两个参数都从外部传入.如果两个参数都不传,默认直接监听child_node并拖拽child_node

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 //当鼠标按在类名为 ${title_class} 的div上时才允许拖拽
     );
    }
   }, 0);
  };

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

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

如果在实践中发现拖拽无效,请务必将上面代码中的child_node打印出来,观察是否获取到了真实的dom以及它内部是否渲染完整.如果没有渲染完全,说明InnerComponent包含异步渲染的代码,要等到渲染完毕后再进行拖拽事件绑定

2.创建拖拽类DragObj

新建文件ModalDrag/drag.js,将下面代码copy进去

下面是实现拖拽的原生代码.主要负责对dom元素进行事件绑定以xxgeINI及改变位置等

export default class DragObj {
 start_x0 = 0;
 start_y0 = 0;
 start_x1 = 0;
 start_y1 = 0;
 state = false; //记录鼠标按键是否松开
 delta_x = 0; //相对于原始位置的横向偏移量
 delta_y = 0; //相对于原始位置的纵向偏移量

 constructor(target, move_item) {
  this.target = target; //被移动的dom元素
  this.move_item = move_item; //接受触发移动行为的dom元素,一般为模态框的头部
  this.init();
 }

 init() {
  this.move_item.style.cursor = 'move';
  this.bindEvehttp://www.cppcns.comnt();
 }

 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; //检测鼠标是否处于按下的状态
  this.start_x0 = e.pageX;
  this.start_y0 = e.pageY;
 }

 moving(e) {
  //鼠标移动时的默认操作
  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.trans编程form = `translate(${
   this.start_x1 - this.start_x0 + this.delta_x
  }px,${this.start_y1 - this.start_y0 + this.deltaphp_y}px)`;
 }
}

3.外部调用

引入高阶函数DragHoc,引入需要增强的模态框组件ToastExport

由于笔者在项目中使用 ant design 3.0 中的 Modal 组件做模态框,让其拖拽只需要传递类名 “ant-modal-content” 和 “ant-modal-header”.

其他场景需要根据静态模态框组件的dom结构分析哪一部分是要移动的,哪一部分是监听拖拽的,将这两部分的类名作为参数传入

import { DragHoc } from "./index.js";
import ToastExport from "../components/ToastExport/index.js";
//引入静态的模态框组件(用户自已定义的模态框组件)
const ToastExportv2 = DragHoc(ToastExport,"ant-modal-content","ant-modal-header"); 
//生成了具备拖拽功能的模态框组件

调用DragHoc函数生成ToastExportv2后,接下来就可以页面上直接使用.如果业务上需要传递参数直接加在属性上

const { visible } = this.props; //visible控制显示隐藏模态框
{visible?<ToastExportv2 visible={visible}/>:null}

调用时需要注意,当visible为true时再渲染ToastExportv2,为了防止绑定事件时dom还没开始渲染.visible为false时,组件销毁会自动调用destory方法解绑已注册的事件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。