拖拽修复

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-container id="infoContainer"
-        <el-aside width="30%">
+                    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,43 +939,33 @@ export default {
     // 拖拽面板
     drag () {
       const el = document.querySelector('#panel')
-      let gap = 10 // 缝隙：小于缝隙时，则吸附
-      let parent = document.body
       const drag = e => {
-        e.stopPropagation && e.stopPropagation()
+        if (this.dragIds.includes(e.target.id)) {
-        e.preventDefault && e.preventDefault()
+          e.stopPropagation && e.stopPropagation()
-        e.cancelBubble = true
+          e.preventDefault && e.preventDefault()
-        e.returnValue = false
+          e.cancelBubble = true
-        let x = e.clientX - el.offsetLeft
+          e.returnValue = false
-        let y = e.clientY - el.offsetTop
+          let x = e.clientX - el.offsetLeft
-        let left = 0
+          let y = e.clientY - el.offsetTop
-        let top = 0
+          let left = 0
+          let top = 0
 
-        document.onmousemove = function (eve) {
+          document.onmousemove = function (eve) {
-          left = eve.clientX - x
+            left = eve.clientX - x
-          top = eve.clientY - y
+            top = eve.clientY - y
-          // // 左
+            el.style.left = left + 'px'
-          // if (left <= gap) {
+            el.style.top = top + 'px'
-          //   left = 0
+          }
-          // }
+          document.onmouseup = e => {
-
+            document.onmousemove = null
-          // if (left >= parent.offsetWidth - el.offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
+            document.onmouseup = null
-          //   left = parent.offsetWidth - el.offsetWidth - 35
+          }
-          // }
-          // // 上
-          // if (top <= gap) top = 0
-          el.style.left = left + 'px'
-          el.style.top = top + 'px'
-        }
-        document.onmouseup = e => {
-          document.onmousemove = null
-          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'
         }