123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- import Vue from 'vue'
- const dragModal = Vue.directive('drag', (el, binding, vnode, oldVnode) => {
-
- Vue.nextTick(() => {
- const isThemeModal = el.classList.contains('grid-theme')
- const dialogHeaderEl = isThemeModal ? el.querySelector('.ant-tabs-bar') : el.querySelector('.ant-modal-header')
- const dragDom = isThemeModal ? el.querySelector('.ant-modal') : el.querySelector('.ant-modal')
- if(dialogHeaderEl){
-
- dialogHeaderEl.style.cssText += ';cursor:move;user-select:none;'
-
- dragDom.style.cssText += `;left:0px;top:0px;`
-
- const sty = (function () {
- if (window.document.currentStyle) {
- return (dom, attr) => dom.currentStyle[attr]
- } else {
- return (dom, attr) => getComputedStyle(dom, false)[attr]
- }
- })()
-
- dialogHeaderEl.onmousedown = (e) => {
-
- const disX = e.clientX - dialogHeaderEl.offsetLeft
- const disY = e.clientY - dialogHeaderEl.offsetTop
-
- 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 - (isThemeModal ? 10 : 0)
-
- const minDragDomTop = dragDom.offsetTop
- const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight - (isThemeModal ? 10 : 0)
-
-
- let styL = sty(dragDom, 'left')
- let styT = sty(dragDom, 'top')
-
-
- if (styL.includes('%')) {
-
- styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
-
- styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
- } else {
- styL = +styL.replace(/\px/g, '')
- styT = +styT.replace(/\px/g, '')
- };
-
- document.onmousemove = function (e) {
-
- 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;`
- }
-
- document.onmouseup = function (e) {
- document.onmousemove = null
- document.onmouseup = null
- dragDom.releaseCapture && dragDom.releaseCapture();
- }
- dragDom.setCapture && dragDom.setCapture();
- }
- }
-
- })
- })
- export default dragModal
|