Vue implementation ELEMENT-UI dialog to drag function

Element-UI dialog can drag and boundary processing

should be required to implement the dialog, the dialog can be dragged, and the Element-UI does not provide official support So refer to the story of the gods, and the solutions suitable for business needs. Many big gods given the code that does not solve the boundary issue, but does not solve the boundary problem, there is a bug, dragging to the unconventional area, and then dragging it back, don’t believe you can try.

In the case of implementation, the package is encapsulated into a JS file, and then it can be used in main.

Or on the code

function implementation code Directives.js code as follows:

Import Vue from ‘Vue’; // v-dialogdrag: pop-up drag and drop attribute Vue.directive (‘Dialogdrag’, {Bind (EL, Binding, vNode, OldvNode) {const Dialogheadrel = El.QuerySelector (‘. el-dialog__header’); const DragDom = EL .queryselector (‘. el-dialog’); // = ‘move’; + = ‘; 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];} }) () DialogheadRel.OnMouseDown = (e) => {// mouse Press, calculate the distance of the current element distance Const Disx = E.Clientx – DialogheadRel.Offsetleft; const deisy = E.Clienty – DialogheadRel.offSettop ; const screenWidth = document.body.clientWidth; // body current width const screenHeight = document.documentElement.clientHeight; // visible area height (body height should, under certain circumstances can not be acquired) const dragDomWidth = dragDom.offsetWidth; // Dialog Box Width const DragdomHeight = DragDom.OffSetHeight; // Dialogue height const mindragdomleft = DragDom.Offsetleft; const margdomlext = screenWidth – dragDom.offsetLeft – dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight – dragDom.offsetTop – dragDomheight; // value obtained with regular px globbing let styL = sty (dragDom, ‘left’) lTYT = STY (DragDom, ‘TOP’); // Note that the value of the first acquired in IE has 50% movement for 50% movement to PX 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;}; Document.onMouseMove = Function e) {// Through the incident, the mobile distance let left = E.Clientx – Disx; let top = E.Clienty- DISY; // Boundary processing IF (- (left)> MINDRAGDOMLEFT) {Left = – (MINDRAGDOMLEFT);} else if (left> maxdragdom {iFT = maxdragdomleft;} if (- (top)> MINDRAGDOMTOP) {TOP = – (MINDRAGDOMTOP);} else if (top> maxdragdomtop) {top = maxdragdomtop;} // Mobile Current Element DragDom.Style.csstext + = `; Left: $ {Left + STYL} PX; Top: $ {TOP + STYT } px; `;}; Document.onmouseUp = function (e) {document.onmousemove = null; document.onmouseup = null;};}}})
Boundary processing, because you can’t get the height of the body (for a long time to get to this) in my project, it takesGet visible area height, here additional knowledge

 Document.body.clientWidth // Body object width Document.body.clientHeight // body object height document.documentelement.clientwidth // Visual area width Document.documentelement.clientHeight // Visible area height   In main. 


// Introduced Dialog to drag, pay attention to the directory where the file is located. There is currently not found in the introduction of the introduction, if there is another IMPORT ‘./directives.js’;
UE file] 
Add V-DialogDRAG attribute

Yes, I hope someone will see hahaha, of course, I still want to help everyone. The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment