拖拽修复

src/components/TestPanel.vue

@@ -2,9 +2,11 @@
   <div :class="['panel', {active: pannelVisible}]"
        id="panel">
     <el-container class="scrollbar"
+                  id="container"
                   v-show="pannelVisible">
       <el-header id="header">
-        <div class="panel-header">
+        <div class="panel-header"
+             id="panelHeader">
           <div class="project">
             <div class="inline-center">
               <p>实训项目</p>
@@ -93,8 +95,10 @@
           </el-table-column>
         </el-table>
       </div>
-      <el-container v-else>
-        <el-aside width="30%">
+      <el-container id="infoContainer"
+                    v-else>
+        <el-aside id="aside"
+                  width="30%">
           <div class="aside-header">
             <div :class="['p-title color', 'system' + systemId]">
               <i class="el-icon-s-order"></i>
@@ -158,7 +162,7 @@
             </div>
           </div>
         </el-aside>
-        <el-main>
+        <el-main id="main">
           <el-tabs class="info-tab"
                    v-model="pannelTab"
                    type="card">
@@ -335,7 +339,8 @@ export default {
       reportTab: '',
       reportPoints: [],
       reportVisible: false,
-      tableHeight: 0
+      tableHeight: 0,
+      dragIds: ['panelHeader', 'aside', 'main', 'infoContainer']
     };
   },
   components: {
@@ -934,9 +939,8 @@ export default {
     // 拖拽面板
     drag () {
       const el = document.querySelector('#panel')
-      let gap = 10 // 缝隙：小于缝隙时，则吸附
-      let parent = document.body
       const drag = e => {
+        if (this.dragIds.includes(e.target.id)) {
           e.stopPropagation && e.stopPropagation()
           e.preventDefault && e.preventDefault()
           e.cancelBubble = true
@@ -949,16 +953,6 @@ export default {
           document.onmousemove = function (eve) {
             left = eve.clientX - x
             top = eve.clientY - y
-          // // 左
-          // if (left <= gap) {
-          //   left = 0
-          // }
-
-          // if (left >= parent.offsetWidth - el.offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
-          //   left = parent.offsetWidth - el.offsetWidth - 35
-          // }
-          // // 上
-          // if (top <= gap) top = 0
             el.style.left = left + 'px'
             el.style.top = top + 'px'
           }
@@ -967,10 +961,11 @@ export default {
             document.onmouseup = null
           }
         }
-      document.querySelector('#header').onmousedown = drag
+      }
+      // document.querySelector('#header').onmousedown = drag
+      document.querySelector('.scrollbar').onmousedown = drag
 
 
-      const toggle = document.querySelector('#toggle')
       const drag1 = e => {
         e.stopPropagation && e.stopPropagation()
         e.preventDefault && e.preventDefault()
@@ -989,15 +984,6 @@ export default {
           clearTimeout(timer)
           left = eve.clientX - x
           top = eve.clientY - y
-          // 左
-          // if (left <= gap) left = 0
-          // const offsetWidth = this.pannelVisible ? el.offsetWidth : 0
-          // if (left >= parent.offsetWidth - offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
-          //   left = parent.offsetWidth - offsetWidth - 35
-          // }
-
-          // 上
-          // if (top <= gap) top = 0
           el.style.left = left + 'px'
           el.style.top = top + 'px'
         }