拖拽

import { Directive } from "vue";

/*
* 用法：
* 1、import {DragWindow,DragWindowStop}from"@/utils/drag-window"
* 2、  directives: {
    drag: DragWindow,
    dragshop:DragWindowStop
  },
  3、v-drag，v-dragshop
* */
const maxZIndex = 99999999;
const popupZIndex = 999;
let triggerZIndex = popupZIndex;
/** 拖动窗口 */
export const DragWindow: Directive = {
    mounted(el: HTMLDivElement) {
        el.style.zIndex = String(triggerZIndex);
        el.onmousedown = (ev) => {
            triggerZIndex += 1;
            el.style.margin=String('unset')
            el.style.zIndex = String(triggerZIndex < maxZIndex ? triggerZIndex : el.style.zIndex);
            // 鼠标按下的位置
            const mouseXStart = ev.clientX;
            const mouseYStart = ev.clientY;
            el.style.top = mouseYStart-20 + "px";
            el.style.left = mouseXStart-50 + "px";
            // 当前滑块位置
            const rectLeft = el.offsetLeft;
            const rectTop = el.offsetTop;

            document.onmousemove = (e) => {
                // 鼠标移动的位置
                const mouseXEnd = e.clientX;
                const mouseYEnd = e.clientY;
                const moveX = mouseXEnd - mouseXStart + rectLeft;
                const moveY = mouseYEnd - mouseYStart + rectTop;
                el.style.top = moveY + "px";
                el.style.left = moveX + "px";
            };
            document.onmouseup = () => document.onmousemove = null;
        };
    },
    unmounted() {
        triggerZIndex = popupZIndex;
    }
};
/** 禁止拖动窗口 */
export const DragWindowStop = (el: HTMLDivElement) => el.onmousedown = (e) => e.stopPropagation();