dialogDraggable.js代码：

importVuefrom'vue'

//v-dialogDrag:弹窗拖拽

Vue.directive('dialogDrag',{

bind(el,binding,vnode,oldVnode){

constdialogHeaderEl=el.querySelector('.el-dialog__header')

constdragDom=el.querySelector('.el-dialog')

dialogHeaderEl.style.cursor='move'

//获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null);

conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null)

dialogHeaderEl.onmousedown=(e)=>{

//鼠标按下，计算当前元素距离可视区的距离

constdisX=e.clientX-dialogHeaderEl.offsetLeft

constdisY=e.clientY-dialogHeaderEl.offsetTop

//获取到的值带px正则匹配替换

letstyL,styT

//注意在ie中第一次获取到的值为组件自带50%移动之后赋值为px

if(sty.left.includes('%')){

styL=+document.body.clientWidth*(+sty.left.replace(/%/g,'')/100)

styT=+document.body.clientHeight*(+sty.top.replace(/%/g,'')/100)

}else{

styL=+sty.left.replace(/px/g,'')

styT=+sty.top.replace(/px/g,'')

}

document.onmousemove=function(e){

//通过事件委托，计算移动的距离

constl=e.clientX-disX

constt=e.clientY-disY

//移动当前元素

dragDom.style.left=`${l+styL}px`

dragDom.style.top=`${t+styT}px`

//将此时的位置传出去

//binding.value({x:e.pageX,y:e.pageY})

}

document.onmouseup=function(e){

document.onmousemove=null

document.onmouseup=null

}

}

}

})

main.js引用：

1

import‘@/assets/dialogDraggable.js'

模块中引用

1

<el-dialogv-dialogDrag></el-dialog>

有几个点须要注意一下浏览器

每一个弹窗都要有惟一dom可操做指令能够作到

拖拽时要添加可拖拽区块header

因为element-uidialog组件在设计时宽度用了百分比,这里不一样浏览器有兼容性问题

实现拖拽宽高时获取边缘问题div定位设置模拟边缘