fix[el-dargDialog]: fixed drag bug in IE

PanJiaChen · PanJiaChen · commit afd255d5bac5 · 2018-04-29T22:38:59.000+08:00
diff --git a/src/directive/el-dragDialog/drag.js b/src/directive/el-dragDialog/drag.js
@@ -2,26 +2,32 @@ 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) => {
       // 鼠标按下，计算当前元素距离可视区的距离
       const disX = e.clientX - dialogHeaderEl.offsetLeft
       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})
