vue实现element-ui对话框可拖拽功能

element-ui对话框可拖拽及边界处理

应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。

在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。

还是上代码吧

功能实现代码directives.js代码如下：

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

在边界处理上，因为在我的项目中无法获取到body的高度（被这个折磨了好久），所以采取了获取可见区域高度，这里补充点知识

document.body.clientwidth //body对象宽度
document.body.clientheight //body对象高度
document.documentelement.clientwidth //可见区域宽度
document.documentelement.clientheight //可见区域高度

在main.js中引入

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

ue文件中使用：

在el-dialog标签中加入v-dialogdrag属性

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

具体使用便是这样，希望有人看到哈哈哈，当然主要还是想帮到大家。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。