vue給元素綁定拖拽事件

直接上代碼

給元素綁定事件先

@mousedown="move"

然后在methods中直接調用就好

move(e){
      let odiv = e.target;        //獲取目標元素
      //算出鼠標相對元素的位置
      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;
      };
  }