Wie implementiert man die Drag-and-Drop-Funktion des Element-UI-Dialogfelds? (mit Code)

In diesem Artikel erfahren Sie, wie Sie die Drag-and-Drop-Funktion des Element-UI-Dialogfelds implementieren. (Beigefügt ist der Code), der einen gewissen Referenzwert hat. Freunde in Not können sich darauf beziehen. Ich hoffe, er wird Ihnen hilfreich sein.

Element-UI-Dialogfeld kann gezogen und begrenzt werden

Als Reaktion auf Geschäftsanforderungen ist es notwendig, das Problem des ziehbaren Dialogfelds zu implementieren, das Element-UI nicht offiziell bereitstellt Support, also unter Bezugnahme auf die Artikel des Masters, haben wir Lösungen gefunden, die den Geschäftsanforderungen entsprechen. Viele von Meistern angegebene Codes lösen das Grenzproblem nicht, aber wenn sie das Grenzproblem nicht lösen, liegt ein Fehler vor. Wenn Sie es in den unsichtbaren Bereich ziehen, können Sie es nie zurückziehen Du glaubst mir nicht, du kannst es versuchen.
Wenn die Funktion implementiert ist, wird sie in eine js-Datei gekapselt und dann zur globalen Verwendung in main.js eingeführt.
Noch Code

Der Funktionsimplementierungscode des Directives.js-Codes lautet wie folgt:

import Vue from 'vue';
 
// v-dialogDrag: 弹窗拖拽属性
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;'
 
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, 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) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dialogHeaderEl.offsetLeft;
            const disY = e.clientY - dialogHeaderEl.offsetTop;
            
            const screenWidth = document.body.clientWidth; // body当前宽度
                const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) 
                
                const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
                const dragDomheight = dragDom.offsetHeight; // 对话框高度
                
                const minDragDomLeft = dragDom.offsetLeft;
                const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
                
                const minDragDomTop = dragDom.offsetTop;
                const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
 
            
            // 获取到的值带px 正则匹配替换
            let styL = sty(dragDom, 'left');
            let styT = sty(dragDom, 'top');
 
            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为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) {
                // 通过事件委托，计算移动的距离 
                                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;
                                }
 
                // 移动当前元素  
                                dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
            };
 
            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }  
    }
})

In Bezug auf die Grenzverarbeitung, da die Höhe des Körpers in meinem Projekt nicht ermittelt werden kann (I Ich bin davon (schon seit langem) gequält, daher habe ich die Methode zum Ermitteln der Höhe des sichtbaren Bereichs verwendet. Hier werde ich einige Kenntnisse hinzufügen, die in main.js eingeführt und im Hauptbereich verwendet wurden .js-Datei:

wurde zum el-dialog-Tag hinzugefügt

document.body.clientWidth  //BODY对象宽度
document.body.clientHeight //BODY对象高度
document.documentElement.clientWidth  //可见区域宽度
document.documentElement.clientHeight //可见区域高度

Ich hoffe, dass es jemand sieht, hahaha um allen zu helfen.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonWie implementiert man die Drag-and-Drop-Funktion des Element-UI-Dialogfelds? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!