Comment implémenter la fonction glisser-déposer de la boîte de dialogue element-ui ? (avec code)

Ce que cet article vous apporte, c'est comment implémenter la fonction glisser-déposer de la boîte de dialogue element-ui ? (Le code est ci-joint), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

La boîte de dialogue Element-ui peut être glissée, délimitée et traitée

En réponse aux besoins de l'entreprise, il est nécessaire d'implémenter le problème de la boîte de dialogue déplaçable Element-ui. fournir un support officiel, c'est donc Référez-vous à l'article du master et proposez une solution adaptée aux besoins de votre entreprise. De nombreux codes donnés par les maîtres ne résolvent pas le problème des limites, mais s'ils ne résolvent pas le problème des limites, il y a un bug. Faites-le glisser vers l'arrière de la zone invisible et ne le faites jamais glisser en arrière. vous pouvez l'essayer.
Lorsque la fonction est implémentée, elle est encapsulée dans un fichier js, puis introduite dans main.js pour une utilisation globale.
Code fixe

Le code d'implémentation de la fonction directives.js est le suivant :

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;
            };
        }  
    }
})

En termes de traitement des limites, car la hauteur du corps ne peut pas être obtenue dans mon projet (par ce Torturé depuis longtemps), j'ai donc pris la méthode d'obtention de la hauteur de la zone visible ici j'ajoute quelques connaissances

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

et je l'introduis dans main.js

<.>

// 引入Dialog可拖拽，注意文件所在目录。目前尚未发现引入的先后关系，若有再补充
import './directives.js';

Utilisation dans le fichier ue :

Ajoutez l'attribut v-dialogDrag

<el-dialog v-dialogDrag></el-dialog>

à la balise el-dialog. L'utilisation spécifique est la suivante. J'espère que quelqu'un le verra. hahaha. Bien sûr, je veux surtout aider tout le monde.

Recommandations associées :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!