自定义指令 v-dialogDrag 自定义div-模拟弹窗 的拖拽移动

import Vue from 'vue'

Vue.directive('dialogDrag', {
    bind(el, binding, vnode, oldVnode) {
        setTimeout(() => {
            // return
            const dialogHeaderEl = el.querySelector('.name');
            const dragDom = el;
            const transform = document.getElementById('screen-inner').style.transform
            console.log('transform', transform)
            //   let reg = /scale(*);$/
            let scale = transform.replace(/scale\((.*)\)/g, function ($1){
                return arguments[1]
            })
            let scaleX = Number(scale.split(",")[0])
            let scaleY = Number(scale.split(",")[1])
            console.log('scaleX, scaleY', scaleX, scaleY)
            dialogHeaderEl.style.cursor = 'move';

            // 获取原有属性
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;
                // 获取到的值带px 正则匹配替换
                let styL, styT;
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if (sty.left.includes('%')) {
                    styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);
                    styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);
                } else {
                    styL = +sty.left.replace(/px/g, '');
                    styT = +sty.top.replace(/px/g, '');
                }
                document.onmousemove = function (e) {
                    // 通过事件委托，计算移动的距离
                    const l = (e.clientX - disX)/scaleX;
                    const t = (e.clientY - disY)/scaleY;
                    // 移动当前元素
                    dragDom.style.left = `${l + styL}px`;
                    dragDom.style.top = `${t + styT}px`;
                };
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }

        }, 0);
    }
})

使用：
<div v-dialogDrag>
　　testHTML
</div>