1.在項目src目錄下可以新建一個文件夾 ，取名為 directive ,在該目錄中創(chuàng)建drag.js , 代碼如下：

/**
 * @file 自定義拖拽命令
 */

import Vue from 'vue';
 
export default   {
            bind(el: any) {
                el.style.position = 'absolute';
                el.style.zIndex = el.style.zIndex || '3000';
            },

            inserted(el: any) {
                // 設置元素初始位置
                const boundingClientRect = el.getBoundingClientRect();
                el.style.left = boundingClientRect.x + 'px';
                el.style.top = boundingClientRect.y + 'px';
                // 將拖拽元素置于body子元素，防止被relative的父元素遮擋
                document.body.appendChild(el);

                let originX: number;
                let originY: number;
                const mouseDownHandler = (evt: MouseEvent) => {
                    originX = evt.clientX - el.offsetLeft;
                    originY = evt.clientY - el.offsetTop;
                    el.style.cursor = 'pointer';
                };
                const mouseMoveHandler = (evt: MouseEvent) => {
                    if (evt.buttons === 1 && originX && originY) {
                        el.style.left = evt.clientX - originX + 'px';
                        el.style.top = evt.clientY - originY + 'px';
                    }
                };
                const mouseUpHandler = () => {
                    el.style.cursor = 'default';
                };
                el.addEventListener('mousedown', mouseDownHandler);
                el.addEventListener('mousemove', mouseMoveHandler);
                el.addEventListener('mouseup', mouseUpHandler);
                el.__mouseDownHandler__ = mouseDownHandler;
                el.__mouseMoveHandler__ = mouseMoveHandler;
                el.__mouseUpHandler__ = mouseUpHandler;
            },

            unbind(el: any) {
                el.removeEventListener('mousedown', el.__mouseDownHandler__);
                el.removeEventListener('mousemove', el.__mouseMoveHandler__);
                el.removeEventListener('mouseup', el.__mouseUpHandler__);
                // 當父組件銷毀觸發(fā)unbind的時候需要手動刪除這個節(jié)點，不然會一直存留在body中
                el.parentNode.removeChild(el);
            }
}

2.在當前文件夾里新建index.js

import drag from "./drag .js";

var xhDirective = {
    drag :drag ,
}

const install = function(Vue) {
    Object.keys(xhDirective).forEach(key => {
        Vue.directive(key, xhDirective[key]);
    });
    
};

const API = {
    install,
    ...xhDirective
};

export default API;

3.在項目的主文件mian.js中引入，使用vue.use()來注冊系統(tǒng) 的公共指令(部分代碼)

import Vue from 'vue';
import directive from "./directive"
Vue.use(directive)

注：拖拽效果實現(xiàn)代碼原文鏈接：https://blog.csdn.net/csu_passer/article/details/105709661