vue可拖動模態框指令實現

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中引入該指令：

import "./utils/drag"

3.在需要實現拖拽的div中，加入指令：v-drag