vue的拖拽事件配置

在主main.js文件中

import Vue from "vue";
import App from "./App.vue";
// 拖拽指令
Vue.directive("drag", function(el) {
  el.onmousedown = function(e) {
    //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
    var divx = e.clientX - el.offsetLeft;
    var divy = e.clientY - el.offsetTop;
    //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
    document.onmousemove = function(e) {
      //获取移动后div的位置：鼠标位置-divx/divy
      var l = e.clientX - divx;
      var t = e.clientY - divy;
      el.style.left = l + "px";
      el.style.top = t + "px";
      el.style.right = "auto";
    };
    document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
});
new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount("#app");

然后在需要用的组件上加上v-drag

<div class="drag" v-drag></div>