Production of a-modal drag function in antui

Blogging is for taking notes ！！！
antUI in a-modal Drag function production

---

One 、 stay utils Created in drag.js file , The contents are as follows ：

import Vue from 'vue'

// v-dialogDrag:  Pop up drag 
Vue.directive('dragModal', {
    
    bind(el, binding, vnode, oldVnode) {
    
        const dialogHeaderEl = el.querySelector('.ant-modal-header')
        const dragDom = el.querySelector('.ant-modal')
        dialogHeaderEl.style.cursor = 'move'

        //  Get the original properties  ie dom Elements .currentStyle  Fox, Google  window.getComputedStyle(dom Elements , null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

        dialogHeaderEl.onmousedown = (e) => {
    
            //  The mouse click , Calculate the distance between the current element and the visible area 
            const disX = e.clientX - dialogHeaderEl.offsetLeft
            const disY = e.clientY - dialogHeaderEl.offsetTop

            //  Get the value band px  Regular match replacement 
            let styL, styT

            //  Pay attention to ie in   The value obtained for the first time is the component's own 50%  After moving, the assignment is 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) {
    
                //  Through event delegation , Calculate the distance of movement 
                const l = e.clientX - disX
                const t = e.clientY - disY
                //  Move the current element 
                dragDom.style.left = `${
     l + styL}px`
                dragDom.style.top = `${
     t + styT}px`

                //  Send out the position at this time 
                // binding.value({
    x:e.pageX,y:e.pageY})
            }

            document.onmouseup = function (e) {
    
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
})

Two 、 stay main.js Introduction in ：

import '@/utils/drag'

3、 ... and 、 Use ：

Pay attention to the command and the top drag.js Consistency stated in .

Then the pop-up window can be dragged .

summary

If you want to make other UI Popup drag function in the frame , Only need to drag.js Replace the elements in .