From afd255d5bac568df5aa502ce1b039c7bc30a24e3 Mon Sep 17 00:00:00 2001 From: Pan Date: Sun, 29 Apr 2018 22:38:59 +0800 Subject: [PATCH] fix[el-dargDialog]: fixed drag bug in IE --- src/directive/el-dragDialog/drag.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/directive/el-dragDialog/drag.js b/src/directive/el-dragDialog/drag.js index 7d49e4bb..e0b63418 100644 --- a/src/directive/el-dragDialog/drag.js +++ b/src/directive/el-dragDialog/drag.js @@ -2,10 +2,16 @@ export default{ bind(el, binding) { 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 = dragDom.currentStyle || window.getComputedStyle(dragDom, null) + function getStyle(dom, attr) { + if (dom.currentStyle) { + return dom.currentStyle[attr] + } else { + return getComputedStyle(dom, false)[attr] + } + } dialogHeaderEl.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 @@ -13,15 +19,15 @@ export default{ const disY = e.clientY - dialogHeaderEl.offsetTop // 获取到的值带px 正则匹配替换 - let styL, styT + let styL = getStyle(dragDom, 'left') + let styT = getStyle(dragDom, 'top') - // 注意在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) + if (styL.includes('%')) { + styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) + styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) } else { - styL = +sty.left.replace(/\px/g, '') - styT = +sty.top.replace(/\px/g, '') + styL = +styL.replace(/\px/g, '') + styT = +styT.replace(/\px/g, '') } document.onmousemove = function(e) { @@ -30,8 +36,7 @@ export default{ const t = e.clientY - disY // 移动当前元素 - dragDom.style.left = `${l + styL}px` - dragDom.style.top = `${t + styT}px` + dragDom.style.cssText += `;left:${l + styL}px;top:${t + styT}px;` // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY})