vue中拖拽功能代码实现

1. 在vue脚手架项目main.js中加入以下代码：

// 全局自定义拖拽组件
Vue.directive('drag', {
  //1.指令绑定到元素上回立刻执行bind函数，只执行一次
  //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
  bind: function (el, elementObj) {
    let dragBox = el; //获取当前元素
    dragBox.style.position = 'absolute'; // 拖拽元素使用定位，脱离文档流
    dragBox.onmousedown = e => {
      //鼠标相对元素的位置
      let disX = e.clientX - dragBox.offsetLeft;
      let disY = e.clientY - dragBox.offsetTop;
      document.onmousemove = e => {
        //鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        //移动当前元素
        dragBox.style.left = left + 'px';
        dragBox.style.top = top + 'px';
      };
      document.onmouseup = e => {
        //鼠标弹起来的时候不再移动
        document.onmousemove = null;
        //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
        document.onmouseup = null;
        // 对外暴露元素相对于父级位置
        elementObj.value.left = dragBox.style.left;
        elementObj.value.top = dragBox.style.top;
      };
    };
  }
});

2.使用方法
直接通过v-drag，即在需要托拽的标签内添加 v-drag 即可实现拖拽功能，如下图：