VUE实现简单的自由拖拽功能

VUE实现简单的自由拖拽功能

• 话不多少，下面是html代码

<div id="featureTips" @mousedown="move"></div>

• 下面是js代码

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;
      };
    },

• 下面是style代码

{
  //设置宽高
  //设置position定位
  //设置背景颜色等 这个你们自己根据实际情况来写 我就不写了
}