react:antd-modal弹窗拖动效果(3.X源码修改)

首先找到控制antd弹窗的源码文件
react:antd-modal弹窗拖动效果(3.X源码修改)_第1张图片
找到控制modal点击事件的代码

_createClass(Modal, [{    key: "componentDidMount",    value: function componentDidMount() {      if (mousePositionEventBinded) {        return;      } // 只有点击事件支持从鼠标位置动画展开

      (0, _addEventListener["default"])(document.documentElement, 'click', function (e) {        
      mousePosition = {          
      x: e.pageX,          
      y: e.pageY        
      }; 
      // 100ms 内发生过点击事件,则从点击位置动画展示       
      // 否则直接 zoom 展示        
      // 这样可以兼容非点击方式展开
        setTimeout(function () {          
        return mousePosition = null;        
        }, 100);      
        });      
        mousePositionEventBinded = true;    
        } 
        }

在定时器内部写入控制拖动的相关代码

  setTimeout(function (){                    
 var div=document.getElementsByClassName("ant-modal-content")[0]                    var divheader=document.getElementsByClassName("ant-modal-header")[0]                    // console.log(div,divheader)                    
 var dragFlag = false;                    var x,y;                    if(divheader!=null&&divheader!=undefined&&divheader!='') {
  //鼠标单击                       
divheader.onmousedown=(e)=>{                     
  e = e || window.event;                        
  x = e.clientX - div.offsetLeft;                        
  y = e.clientY - div.offsetTop;                        
  dragFlag = true;            
    //鼠标拖动                      
  document.onmousemove = (e)=>{                            
  if (dragFlag) {                                
  e = e || window.event;                                
  div.style.left = e.clientX - x + "px";                                
  div.style.top  = e.clientY - y + "px";                            
  }                        
  };
                  
  document.onmouseup = (e)=>{                            
  dragFlag = false;                           
   // console.log('放开鼠标')   
};                    
}                    
return mousePosition = null;                
}, 100);
         

你可能感兴趣的:(前端)