Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of Vue global custom instruction Modal drag and drop. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Background

The project that has been being done recently is the project built by Vue2, the antdV used in the UI framework, and a lot of Modal dialogs are used in the project, and then suddenly one day the product says, "Why can't this dialog box move, blocking me from reading the information?" there is no way, if there is a need, we have to do it, this is the new generation of beating workers.

First of all, I went to the antdV official website to see the configuration properties and methods of Modal to see if there were any properties or methods in this area that could be solved directly, but I couldn't find them. The second step began to ask Baidu, there are also some related blogs, but generally varied, it is not easy to understand, and then found that there is a way to use global customization seems to be interesting, and then began to solve their own needs.

Realization idea

First of all, we mainly want to complete the effect of moving the dialog box after holding down the left button when the mouse is placed in the head part of the Modal box.

Here, we need to get the element of the header and listen to its onmousedown method, and then set the boundary limit to prevent it from moving out of the screen by calculating the height and width of the dialog box during the onmousedown method. Then we need to monitor the _ document.onmousemove method to calculate the direction and distance of mouse movement, and then adjust the position of the dialog box according to this.

Code implementation

Import Vue from 'vue'// pop-up window drag property / * @ directive Custom property * @ todo pop-up window drag property * @ desc add v-drag * @ param. Ant-modal-header pop-up window head dragged attribute * @ param. Ant-modal dragged 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;' / / get the original attribute ie dom element. 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 down Calculate the distance of the current element from the visible area const disX = e.clientX-dialogHeaderEl.offsetLeft const disY = e.clientY-dialogHeaderEl.offsetTop const screenWidth = document.body.clientWidth / / body current width const screenHeight = document.documentElement.clientHeight / / visible area height (should be body height Can not be obtained in some environments) const dragDomWidth = dragDom.offsetWidth / / dialog box width const dragDomheight = dragDom.offsetHeight / / dialog box 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: 0) / / the value obtained has px regularity Match replacement let styL = sty (dragDom 'left') let styT = sty (dragDom,' top') / / Note the value obtained for the first time in ie is assigned to px if (styL.includes ('%')) {/ / eslint-disable-next-line no-useless-escape styL = + document.body.clientWidth * (+ styL.replace (/\% / g) after the component is moved with 50%. '') / eslint-disable-next-line no-useless-escape styT = + document.body.clientHeight * (+ styT.replace (/\% / g,'')} else {styL = + styL.replace (/\ px/g,'') styT = + styT.replace (/\ px/g,'')} _ document.onmousemove = function (e) {/ / delegate through event Calculate the moving distance let left = e.clientX-disX let top = e.clientY-disY / / Boundary processing if (- (left) > minDragDomLeft) {left =-(minDragDomLeft)} else if (left > maxDragDomLeft) {left = maxDragDomLeft} if (- (top) > minDragDomTop) {top =-(minDragDomTop) } else if (top > maxDragDomTop) {top = maxDragDomTop} / / move the current element dragDom.style.cssText + = ` Left:$ {left + styL} px;top:$ {top + styT} px; `} _ document.onmouseup = function (e) {_ document.onmousemove = null _ document.onmouseup = null}})})

Component call

The a-modal component can set v-drag.

...

Confirm to delete the field?

... Realize the effect

This is the end of this article on "sample analysis of Vue global custom instruction Modal drag and drop". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.