Element-ui How can I drag and drop dialog boxes? (Attached code)

What this article brings to you is about how the Element-ui dialog box can be dragged and pulled. (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Element-ui dialog box can be dragged and boundary processing

In response to business needs, the need to implement a dialog box can be dragged and element-ui, should not provide official support, and then refer to the Great God's article, the solution for business needs. Many great gods give the code is not solve the boundary problem, but do not solve the boundary problem there is a bug, dragged to the non-visual area behind no longer dragged back, do not believe you can try.
In the implementation of the function of the case, encapsulated into a JS file, and then main.js in the introduction can be used globally.
or the code.

The function implementation code Directives.js code is as follows:

Import vue from ' Vue ';  V-dialogdrag: Pop-up Window drag property vue.directive (' Dialogdrag ', {bind (El, binding, Vnode, Oldvnode) {Const DIALOGHEADEREL =        El.queryselector ('. El-dialog__header ');        Const DRAGDOM = El.queryselector ('. El-dialog ');        DialogHeaderEl.style.cursor = ' move ';        DialogHeaderEl.style.cssText + = '; cursor:move; '         DragDom.style.cssText + = '; top:0px; '        Gets the original property of the IE DOM element. currentstyle Firefox Google window.getComputedStyle (DOM element, NULL); Const STY = (function () {if (Window.document.currentStyle) {return (DOM, attr) =&G T                DOM.CURRENTSTYLE[ATTR];                } else{return (DOM, attr) = getComputedStyle (DOM, false) [attr];            }}) () Dialogheaderel.onmousedown = (e) + = {//mouse down, calculates 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 under certain circumstances) const DRAGDOMWIDTH = dragdom.offsetwidth; dialog box Width const dragdomheight = dragdom.offsetheight;                dialog box Height const MINDRAGDOMLEFT = dragdom.offsetleft;                                Const MAXDRAGDOMLEFT = screenwidth-dragdom.offsetleft-dragdomwidth;                Const MINDRAGDOMTOP = dragdom.offsettop;                         Const MAXDRAGDOMTOP = screenheight-dragdom.offsettop-dragdomheight;            Get to the value with PX regular match replace let Styl = sty (Dragdom, ' left ');             Let Styt = sty (dragdom, ' top '); Note that the first time the value obtained in IE is assigned a value of PX if (styl.includes ('% ')) {styl = +document.body.clientwidth when the component comes with 50% move                * (+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) {//Through event delegation, calculate moving distance let left = e.client                                X-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 current element dragDom.style.cssText + = '; Left:${left + styl}px;top:${top +            styt}px; ';             };                Document.onmouseup = function (e) {document.onmousemove = null;            Document.onmouseup = null;        }; }      }})

In the boundary processing, because in my project can not get to the body height (by this tortured for a long time), so took a gain visibility area height, here to add a bit of knowledge

Document.body.clientWidth  //body Object width document.body.clientHeight// Body Object Height Document.documentElement.clientWidth  //Visible area width document.documentElement.clientHeight//visible area height

Introduced in the Main.js

Introduce dialog to drag and drop, note the directory where the file is located. At present, the introduction of the relationship has not been found, if there is a supplementary import './directives.js ';

UE files used in:
Add the V-dialogdrag attribute to the El-dialog tag

<el-dialog v-dialogdrag></el-dialog>

Specific use is this way, I hope that some people see hahaha, of course, mainly want to help everyone.