How to implement the ELEMENT-UI dialog to drag the function

This article will give you a detailed explanation of how to implement the Element-UI dialog to drag and drop, and Xiaobian feels very practical, so share it for everyone to do a reference, I hope everyone can read this article. Harvest.

The Element-UI dialog can drag and border processing

should be required to implement the dialog, it is necessary to drag the problem, and the Element-UI does not provide official support, so refer to the gods The article has drawn solutions 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 implementing the function, the package is encapsulated into a JS file, and then it can be used in main.
Still the code

function implementation code Directives.js code as follows:

Import Vue from ‘Vue’; // v-Dialogdrag: pop-up drag properties Vue.directive ( ‘dialogDrag’, {bind (el, binding, vnode, oldVnode) {const dialogHeaderEl = el.querySelector () ‘el-dialog__header.’; const dragDom = el.querySelector ( ‘. el-dialog’) ///dialogheadrel.style.cursor = ‘move’; dialogheadrel.style.csstext + = ‘; cursor: move;’ DragDom.Style.csstext + = ‘; Top: 0px;’ // Get the original property IE DOM element .currentstyleFirefox Google Window.getComputedStyle (DOM element, null); const stand = (Function () {if (window.document.currentStyle {Return (Dom, attr) => dom.currentStyle [attr];} else {Return (DOM , attr) => getComputedStyle (DOM, false) [attr];}}) () DialogheadRel.Onmousedown = () => {// mouse Press, calculate the distance const disx = E of the current element distance visible area. 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 (body height should Can not be acquired in some environments) Const DragDomwidth = dragDom.offsetWidth; // box width const dragDomheight = dragDom.offsetHeight; // dialog height const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth – dragDom.offsetLeft – dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = ScreenHeight – DragDom.OffSettop – DragdomHeight; // Get the value of the value PX regular matching replacement lette = sty (Dragdom, ‘left’); lette = sty (Dragdom, ‘top’); // Note in IE The first acquired value assigns a value of 50% of the component 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 (/ \ px / g, ” );}; document.onmousemove = function (e) {// Through event delegate, the mobile distance let left = E.Clientx – Disx; Let top = E.Clienty – DISY; // Border processing IF (- (Left) )> mindragdomleft) {left = – (MINDRAGDOMLEFT);} else if (left> maxdragdom {ift = maxdragdom}IF (- (TOP)> MINDRAGDOMTOP) {TOP = – (MINDRAGDOMTOP);} else if (top> maxdragdomtop) {TOP = MaxDragDomtop;} // Mobile Current Element DragDom.Style.csstext + = `; Left: $ ip + style} px; top: $ {top + styt} px; `;}; document.onmouseup = function (e) {document.onmousemove = null; document.onmouseup = null;};}}})
  On boundaries, because of the height of Body in my project (it has been tortured for a long time), the high level of obtaining visible area is taken, here  

Document.body.clientWidth // Body object width Document.body.clientHeight // body object height document.documentelement.clientwIdth // Visible area width Document.documentelement.ClientHeight // Visual area height

   
// introduced Dialog 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’;

u) Use:  Add V- to the El-Dialog tab DialogDrag attribute  


With how to implement the Element-UI dialog, it is shared here. I hope that the above can have some help to everyone, you can learn more. If the article is good, you can share it out to let more people see.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment