Wechat official account: [Dafront-end Yizhan] Follow Dafront-end Yizhan. Questions or suggestions, welcome the public account message.

This is the 31st day of my participation in the August Text Challenge.More challenges in August

background

Recently, I have been working on a project built by Vue2, which uses antdV for UI framework. Many Modal dialogs were used in the project, and then one day the product said, “Why can’t this dialogs move? It blocks me from reading information”.

First of all, I went to antdV official website to see the configuration attributes and methods of Modal, to see if there is any attribute or method in this aspect that can be directly solved, but I did not find it. The second step began to ask Baidu, there are some related blogs, but generally varied, not particularly easy to understand, and then found that there is a global custom specified way seems to be somewhat interesting, and then began their own practical operation to solve the needs.

Implementation approach

First of all, we mainly want to complete the mouse on the Modal box head part of press and hold the left button after the dialog box move an effect.

Here we’re going to get the header element and listen for its onMouseDown method, and then we’re going to set the bounds for it not to move out of the screen by calculating the height and width of the dialog in the onMouseDown method, and then we’re going to listen for the document. onMousemove method to calculate the direction and distance of the mouse movement, Then adjust the position of the dialog box according to this.

Code implementation

Import Vue from 'Vue' // popover drag attribute /** * @directive Custom attribute * @todo popover drag attribute * @desc Add V-drag * @param using HTML loaded arbitrarily inside popover .ant-modal-header Popover header property used for dragging * @param. ant-modal drag property */ vue. directive('drag', (el, binding, vnode, oldVnode) => { // inserted (el, binding, vnode, oldVnode) { Vue.nextTick(() => { const isThemeModal = el.classList.contains('grid-theme') const dialogHeaderEl = isThemeModal ? el.querySelector('.ant-tabs-bar') : document.querySelector('.ant-modal-header') const dragDom = isThemeModal ? el.querySelector('.ant-modal') : document.querySelector('.ant-modal') // dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cssText += '; cursor:move; ' // dragDom.style.cssText += '; top:0px; CurrentStyle Firefox Google Window.getComputedStyle (DOM element, null); const sty = (function () { if (window.document.currentStyle) { return (dom, attr) => dom.currentStyle[attr] } else { return (dom, attr) => getComputedStyle(dom, False) [attr]}}) () dialogHeaderEl. Onmousedown = (e) = > {/ / mouse press, Calculate distance from the current element distance visual areas const disX = e.c. with our fabrication: lientX - dialogHeaderEl. OffsetLeft const disY = e.c. with our fabrication: lientY - dialogHeaderEl. OffsetTop Const screenWidth = document. Body. ClientWidth / / body width const current screenHeight = document. The documentElement. ClientHeight / / Height of visible area (should be body height, Const dragDomWidth = dragdom.offsetwidth // dialog width const dragDomheight = dragdom.offsetheight // dialog height 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: Let styL = sty(dragDom, 'left') let styT = sty(dragDom, 'left') Px if (styl.includes ('%')) {// eslint-disable-next-line no-useless-escape styL  = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) // eslint-disable-next-line no-useless-escape styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) } else { styL = +styL.replace(/\px/g, '') styT = +styT.replace(/\px/g, '') }; Document. onmousemove = function (e) {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} left:${left + styL}px; top:${top + styT}px; ` } document.onmouseup = function (e) { document.onmousemove = null document.onmouseup = null } } }) })Copy the code

Component calls

The A-Modal component can be set to V-Drag

. < A-modal V-model ="visible" title=" prompt ":maskClosable="false" @cancel="handleCancle" @OK ="handleOk" V-drag > <p> Are you sure to delete the field </p>  </a-modal> ...Copy the code

Implementation effect














Pay attention to the bottom [Big front End station]
Let’s learn and make progress together

[Share, like, watch] Let more people join us