vue 拖拽元素指令

效果图

• 使用

 <!-- 注意要给div元素设置position 和 z-index -->
<div v-drap>盒子</div>

• 实现代码

// 拖拽元素
Vue.directive('drag', function (el: any) {
    el.onmousedown = function (ev: any) {
        const disX = ev.clientX - el.offsetLeft;
        const disY = ev.clientY - el.offsetTop;
        document.onmousemove = function (ev) {
            const l = ev.clientX - disX;
            const t = ev.clientY - disY;
            el.style.left = l + 'px';
            el.style.top = t + 'px';
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
});