import type { App, Directive, DirectiveBinding } from 'vue';
|
|
interface DraggableElement extends HTMLElement {
|
__modal_draggable__?: {
|
handleEl: HTMLElement;
|
onMousedown: (e: MouseEvent) => void;
|
};
|
}
|
|
const DRAGGABLE_KEY = '__modal_draggable__' as const;
|
|
function setupDrag(modalWrap: DraggableElement, handleSelector: string) {
|
const dragDom = modalWrap.querySelector('.ant-modal') as HTMLElement;
|
const handleEl = modalWrap.querySelector(handleSelector) as HTMLElement;
|
|
if (!dragDom || !handleEl) return;
|
if (modalWrap[DRAGGABLE_KEY]) return;
|
|
handleEl.style.cursor = 'move';
|
handleEl.style.userSelect = 'none';
|
|
const onMousedown = (e: MouseEvent) => {
|
if (!e || modalWrap.classList.contains('fullscreen-modal')) return;
|
const disX = e.clientX;
|
const disY = e.clientY;
|
const screenWidth = document.body.clientWidth;
|
const screenHeight = document.documentElement.clientHeight;
|
|
const dragDomWidth = dragDom.offsetWidth;
|
const dragDomHeight = dragDom.offsetHeight;
|
const minDragDomLeft = dragDom.offsetLeft;
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
|
const minDragDomTop = dragDom.offsetTop;
|
let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;
|
if (maxDragDomTop < 0) maxDragDomTop = screenHeight - dragDom.offsetTop;
|
|
const domLeft = getComputedStyle(dragDom).left;
|
const domTop = getComputedStyle(dragDom).top;
|
let styL = +domLeft;
|
let styT = +domTop;
|
|
if (domLeft.includes('%')) {
|
styL = +document.body.clientWidth * (+domLeft.replaceAll('%', '') / 100);
|
styT = +document.body.clientHeight * (+domTop.replaceAll('%', '') / 100);
|
} else {
|
styL = +domLeft.replaceAll('px', '');
|
styT = +domTop.replaceAll('px', '');
|
}
|
|
document.body.style.cursor = 'move';
|
document.body.style.userSelect = 'none';
|
|
const onMousemove = (e: MouseEvent) => {
|
let left = e.clientX - disX;
|
let top = e.clientY - disY;
|
|
if (-left > minDragDomLeft) {
|
left = -minDragDomLeft;
|
} else if (left > maxDragDomLeft) {
|
left = maxDragDomLeft;
|
}
|
|
if (-top > minDragDomTop) {
|
top = -minDragDomTop;
|
} else if (top > maxDragDomTop) {
|
top = maxDragDomTop;
|
}
|
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
|
};
|
|
const onMouseup = () => {
|
document.body.style.cursor = '';
|
document.body.style.userSelect = '';
|
document.removeEventListener('mousemove', onMousemove);
|
document.removeEventListener('mouseup', onMouseup);
|
};
|
|
document.addEventListener('mousemove', onMousemove);
|
document.addEventListener('mouseup', onMouseup);
|
};
|
|
handleEl.addEventListener('mousedown', onMousedown);
|
(modalWrap as DraggableElement)[DRAGGABLE_KEY] = { handleEl, onMousedown };
|
}
|
|
function cleanupDrag(modalWrap: DraggableElement) {
|
const dragData = modalWrap[DRAGGABLE_KEY];
|
if (dragData) {
|
dragData.handleEl.removeEventListener('mousedown', dragData.onMousedown);
|
delete modalWrap[DRAGGABLE_KEY];
|
}
|
}
|
|
/** 自动为 .common-container-modal 添加拖拽支持 */
|
export function setupGlobalDragObserver() {
|
const observer = new MutationObserver((mutations) => {
|
for (const mutation of mutations) {
|
for (const node of mutation.addedNodes) {
|
if (node instanceof HTMLElement) {
|
if (node.classList.contains('ant-modal-wrap')) {
|
const modal = node.querySelector('.common-container-modal');
|
if (modal) {
|
setTimeout(() => setupDrag(node as DraggableElement, '.ant-modal-header'), 50);
|
}
|
}
|
const wraps = node.querySelectorAll?.('.ant-modal-wrap');
|
wraps?.forEach((wrap: HTMLElement) => {
|
const modal = wrap.querySelector('.common-container-modal');
|
if (modal) {
|
setTimeout(() => setupDrag(wrap as DraggableElement, '.ant-modal-header'), 50);
|
}
|
});
|
}
|
}
|
for (const node of mutation.removedNodes) {
|
if (node instanceof HTMLElement) {
|
if (node.classList.contains('ant-modal-wrap')) {
|
cleanupDrag(node as DraggableElement);
|
}
|
const wraps = node.querySelectorAll?.('.ant-modal-wrap');
|
wraps?.forEach((wrap: HTMLElement) => cleanupDrag(wrap as DraggableElement));
|
}
|
}
|
}
|
});
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
return observer;
|
}
|
|
/** v-draggable 指令，用于显式标记需要拖拽的 modal */
|
export const vDraggable: Directive = {
|
mounted(el: HTMLElement, binding: DirectiveBinding<string | undefined>) {
|
const handleSelector = binding.value || '.ant-modal-header';
|
const modalWrap = (el.classList.contains('ant-modal-wrap') ? el : el.closest('.ant-modal-wrap')) as DraggableElement;
|
if (!modalWrap) return;
|
|
const observer = new MutationObserver(() => {
|
const dragDom = modalWrap.querySelector('.ant-modal');
|
if (dragDom) {
|
observer.disconnect();
|
setupDrag(modalWrap, handleSelector);
|
}
|
});
|
|
observer.observe(modalWrap, { childList: true, subtree: true });
|
|
if (modalWrap.querySelector('.ant-modal')) {
|
observer.disconnect();
|
setupDrag(modalWrap, handleSelector);
|
}
|
},
|
|
unmounted(el: HTMLElement) {
|
const modalWrap = (el.classList.contains('ant-modal-wrap') ? el : el.closest('.ant-modal-wrap')) as DraggableElement;
|
if (!modalWrap) return;
|
cleanupDrag(modalWrap);
|
},
|
};
|
|
/** 全局注册指令和自动拖拽 */
|
export function registerDraggable(app: App) {
|
app.directive('draggable', vDraggable);
|
setupGlobalDragObserver();
|
}
|
