import Vue from "vue";
let globalLeft: number;
let globalTop: number;
Vue.directive("drag-modal", (el, bindings, vnode) => {
Vue.nextTick(() => {
const { visible, destroyOnClose } = vnode.componentInstance;
if (!visible) return;
const modal = el.getElementsByClassName("ant-modal")[0] as any;
const header = el.getElementsByClassName("ant-modal-header")[0] as any;
const selfWidth = modal.clientWidth;
const selfHeight = modal.clientHeight;
header.style.cursor = "move";
if (!destroyOnClose) {
modal.style.left = (globalLeft || 0) + "px";
modal.style.top = (globalTop || 0) + "px";
}
header.onmousedown = (e: MouseEvent) => {
const startX = e.clientX;
const startY = e.clientY;
el.onmousemove = (event) => {
const endX = event.pageX;
const endY = event.pageY;
modal.left = endX - startX + (globalLeft || 0);
modal.top = endY - startY + (globalTop || 0);
if (modal.left < -(document.body.clientWidth - selfWidth) / 2) modal.left = -(document.body.clientWidth - selfWidth) / 2;
if (modal.left > (document.body.clientWidth - selfWidth) / 2) modal.left = (document.body.clientWidth - selfWidth) / 2;
if (modal.top < -(document.body.clientHeight - selfHeight) / 2) modal.top = -(document.body.clientHeight - selfHeight) / 2;
if (modal.top > (document.body.clientHeight - selfHeight) / 2) modal.top = (document.body.clientHeight - selfHeight) / 2;
modal.style.left = modal.left + "px";
modal.style.top = modal.top + "px";
};
el.onmouseup = () => {
globalLeft = modal.left;
globalTop = modal.top;
el.onmousemove = null;
el.onmouseup = null;
header.releaseCapture && header.releaseCapture();
};
header.setCapture && header.setCapture();
};
});
});
v-drag-modal
"register-service-worker": "^1.7.2",
"uuid": "^7.0.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.9.0",
"vue-pdf": "^4.3.0",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"