创建dialogDrag.js
/************************************************
Description:
el-dialog弹窗组件添加拖拽支持
Dependencies:
vue.js
el-dialog (element-ui)
************************************************/
Vue.directive('dialogDrag', {
bind: function (el) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor = 'move'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dialogHeaderEl.onmousedown = e => {
// 鼠标按下,计算当前元素距离可视区的距离
//const disX = e.clientX - dialogHeaderEl.offsetLeft
//const disY = e.clientY - dialogHeaderEl.offsetTop
const disX = e.clientX
const disY = e.clientY
// 获取到的值带px 正则匹配替换
let styL, 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) {
// 通过事件委托,计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
var tempX = l + styL
var tempY = t + styT
// 移动当前元素
dragDom.style.left = `${tempX}px`
dragDom.style.top = `${tempY}px`
//确保不移动超出可视范围之外
//(Reference: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)
var rect = dragDom.getBoundingClientRect()
while (rect.x < 0 || rect.y < 0) {
if (rect.x < 0) {
tempX++
}
if (rect.y < 0) {
tempY++
}
dragDom.style.left = `${tempX}px`
dragDom.style.top = `${tempY}px`
rect = dragDom.getBoundingClientRect()
}
// 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
在需要的地方的地方引入
1. 比如vue组件扩展JVue.js中引入
import "/Components/vue/dialogDrag.js"
//(以import导入到JVue.js,JVue.js需以type="module"引入)
2. 或者在使用弹窗的页面中在引入vue后以默认的type="text/javascript"引入
<script src="/Components/vue/dialogDrag.js"></script>
在需要添加拖拽功能的弹窗组件el-dialog中直接使用新添加 v-dialog-drag 属性(指令)即可
<el-dialog title="提示" :visible.sync="dialogVisible" width="550px" :close-on-click-modal="false" v-dialog-drag>
<el-form ......>
......
</el-form>
<div slot="footer" class="dialog-footer center">
<el-button size="small" @@click="dialogVisible = false">{{ $t("sos.btn.Cancel") }}</el-button>
<el-button size="small" type="primary" @@click="saveForm">{{ $t("sos.btn.Ok") }}</el-button>
</div>
</el-dialog>