vue自定義拖動指令

1、在項目開發中，需要對div進行拖動。因為需要自定義組件

a》定義全局拖拽指令：

　　定義全局指令，需要在main.js中寫入vue.directive('drag',{});即可。但是一般會在外部新建一個drag.js文件，在js文件內部實現拖拽邏輯，最后在dom代碼中調用該指令：

　　（1）、新建drag.js文件：

import Vue from 'vue';
//使用Vue.directive()定義一個全局指令
//1.參數一：指令的名稱，定義時指令前面不需要寫v-
//2.參數二：是一個對象，該對象中有相關的操作函數
//3.在調用的時候必須寫v-
const drag = Vue.directive('drag',{
  //1.指令綁定到元素上回立刻執行bind函數，只執行一次
  //2.每個函數中第一個參數永遠是el，表示綁定指令的元素，el參數是原生js對象
  //3.通過el.focus()是無法獲取焦點的，因為只有插入DOM后才生效
  bind:function(el){},
  //inserted表示一個元素，插入到DOM中會執行inserted函數，只觸發一次
  inserted:function(el){
    el.onmousedown = function (e) {
      var disx = e.pageX - el.offsetLeft;
      var disy = e.pageY - el.offsetTop;
      document.onmousemove = function (e) {
        el.style.left = e.pageX - disx + 'px';
        el.style.top = e.pageY - disy + 'px';
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      }
    }
  },
  //當VNode更新的時候會執行updated，可以觸發多次
  updated:function(el) {}
})
export default drag;

　　(2)、在main.js中引入該文件即可。不需要vue.use();

　　

　　(3)、在頁面中直接調用

 

b》定義局部拖拽指令：

　　局部指令，只需要要對應的.vue頁面中，添加directives屬性，並在directives中寫入對應的指令即可。