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を追加します.