实现ant-desgin里的Modal组件拖拽

最新推荐文章于 2023-08-09 19:05:39 发布

江禾

最新推荐文章于 2023-08-09 19:05:39 发布

阅读量884

点赞数 1

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_45785424/article/details/107325853

版权

本文介绍了如何在ReactJS中利用Ant Design的Modal组件实现拖拽效果。通过修改Modal的样式使其绝对定位，封装drag.js处理拖拽逻辑，并在组件中引入并调用此功能，最终在父组件中应用，成功实现Modal的拖动功能。

摘要由CSDN通过智能技术生成

在使用Modal组件时,新增了一个需求,让他能够实现拖拽的效果
1.首先找到控制modal的类名
在这里插入图片描述
让这个div框变为一个绝对定位,它默认是相对定位,然后可以给它一个高度,如果不给,就是我图中的样子了.在index.less文件里面给它样式,引入
index.less

.ant-modal-content{
   
  position: absolute !important;
  width: 480px;
}

2.封装一个drag.js
drag.js

class DragBox {
   
  constructor() {
   
      this.el = null;
  }
  init(cls) {
   
      // this.el = document.getElementById(cls);
      this.el = document.getElementsByClassName(cls)[0];
      return this;
  }
  DragStart() {
   
     this.el.onmousedown = (evt) => {
   
          var e = evt || window.event;
          var disX = e.pageX -this.el.offsetLeft;
          var disY = e.pageY - this.el.offsetTop;
          this.DragIng(disX, disY);