表单的拖拽

由于使用ant-design中的表单组件   @mousedown="drag" 无法触发

所以单独写<div  @mousedown="drag" class="topIndex"></div> 定位到表单的头部用来触发函数

drag(e){

　　 //获取目标元素parentNode

      let odiv = e.target.parentNode.parentNode;       

 

      //算出鼠标相对元素的位置

      let disX = e.clientX - odiv.offsetLeft;

      let disY = e.clientY - odiv.offsetTop;

 

　　//鼠标按下并移动的事件

      document.onmousemove = (e)=>{       

 

          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

          let left = e.clientX - disX;    

          let top = e.clientY - disY;

          

          //绑定元素位置到positionX和positionY上面

          this.positionX = top;

          this.positionY = left;

          

          //移动当前元素

          odiv.style.left = left + 'px';

          odiv.style.top = top + 'px';

      };

      document.onmouseup = (e) => {

          document.onmousemove = null;

          document.onmouseup = null;

      };

    },