文章拖动

src/views/bookShelf/components/InnerTextSearch.vue

@@ -100,7 +100,7 @@
 
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
     <div class="search-box" v-if="showSearch">
-        <span class="search-show-btn" @click="changeShow"></span>
+        <span class="search-show-btn" id="dragDrop" @mousedown="positionChange"></span>
         <div class="search">
             <div class="select-result" @click="showSearchColorList">
                 <span class="selectBg" :style="{ background: colorValue, borderColor: borderColorValue}"></span>
@@ -525,6 +525,28 @@ export default {
     changeIsFull() {
       this.isFull = false;
     },
+    positionChange() {
+        // 获取拖动时点击的元素（子div）
+        const el = document.getElementById('dragDrop');
+        //获取拖动时移动的元素（父div）
+        let p_el = el.parentElement;
+        //添加鼠标按下监听事件
+        document.getElementById('dragDrop').addEventListener('mousedown', function (e) {
+            var disx = e.pageX - p_el.offsetLeft;
+            var disy = e.pageY - p_el.offsetTop;
+ 
+            document.onmousemove = function (e) {
+                p_el.style.left = e.pageX - disx + 'px';
+                p_el.style.top = e.pageY - disy + 'px';
+                el.style.cursor = 'grabbing';
+            }
+            document.onmouseup = function () {
+                document.onmousemove = document.onmouseup = null;
+                el.style.cursor = 'grab';
+            }
+        }, true);
+ 
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -533,6 +555,7 @@ export default {
     if (this.articleInfo) {
       this.handleData();
     }
+    
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -691,7 +714,7 @@ export default {
         height: 4px;
         display: block;
         margin: 6px auto;
-        cursor: pointer;
+        cursor: move;
     }
     .search {
         position: relative;

src/views/bookShelf/components/LexicalType.vue

@@ -125,7 +125,7 @@
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
     <div class="lexical-search" v-if="showSearch">
         <div class="search-box">
-            <span class="search-show-btn" @click="changeShow"></span>
+            <span class="search-show-btn" id="dragDrop" @mousedown="positionChange('dragDrop')"></span>
             <div class="tabs-box">
                 <a :class="['tabs-btn',tabsIndex===0?'active':'']" @click="tabsIndex=0">词汇分布</a>
                 <a :class="['tabs-btn right-btn',tabsIndex===1?'active':'']" @click="tabsIndex=1">句长分布</a>
@@ -151,21 +151,22 @@
                 </li>
             </ul>
         </div>
-    </div>
-    <div class="clear-box" v-if="showSearch">
-        <h5>词汇标记设置</h5>
-        <div class="item" v-if="tabsIndex===0">
-            <span>隐藏标记词</span>
-            <el-switch
-                v-model="hideSelectWord"
-                active-color="#175DFF"
-                inactive-color="#D0D3D9"
-                key="word-select">
-            </el-switch>
-        </div>
-        <div class="item red-item" @click="clearSelect">
-            <span>清除标记</span>
-            <svg-icon icon-class="brush-line"></svg-icon>
+        <div class="clear-box">
+            <span class="search-show-btn" id="dragDrops" @mousedown="positionChange('dragDrops')"></span>
+            <h5>词汇标记设置</h5>
+            <div class="item" v-if="tabsIndex===0">
+                <span>隐藏标记词</span>
+                <el-switch
+                    v-model="hideSelectWord"
+                    active-color="#175DFF"
+                    inactive-color="#D0D3D9"
+                    key="word-select">
+                </el-switch>
+            </div>
+            <div class="item red-item" @click="clearSelect">
+                <span>清除标记</span>
+                <svg-icon icon-class="brush-line"></svg-icon>
+            </div>
         </div>
     </div>
     <div class="voice-full-screen" :id="'screen-' + mathNum">
@@ -514,6 +515,28 @@ export default {
     changeIsFull() {
       this.isFull = false;
     },
+    positionChange(els) {
+        // 获取拖动时点击的元素（子div）
+        const el = document.getElementById(els);
+        //获取拖动时移动的元素（父div）
+        let p_el = el.parentElement;
+        //添加鼠标按下监听事件
+        document.getElementById(els).addEventListener('mousedown', function (e) {
+            var disx = e.pageX - p_el.offsetLeft;
+            var disy = e.pageY - p_el.offsetTop;
+ 
+            document.onmousemove = function (e) {
+                p_el.style.left = e.pageX - disx + 'px';
+                p_el.style.top = e.pageY - disy + 'px';
+                el.style.cursor = 'grabbing';
+            }
+            document.onmouseup = function () {
+                document.onmousemove = document.onmouseup = null;
+                el.style.cursor = 'grab';
+            }
+        }, true);
+ 
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -702,10 +725,6 @@ export default {
     }
 }
 .lexical-search{
-    right: calc((100% - 1000px)/2 - 8px);
-    position: fixed;
-    top: 200px;
-    width: 270px;
     padding: 8px;
 }
 .search-box{
@@ -715,6 +734,10 @@ export default {
     box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
     // min-height: 204px;
     padding: 0 24px 24px;
+    right: calc((100% - 1000px)/2 - 8px);
+    position: fixed;
+    top: 200px;
+    width: 270px;
     .search-show-btn{
         border-radius: 4px;
         background:#D0D3D9;
@@ -727,6 +750,7 @@ export default {
     .tabs-box{
         display: flex;
         align-items: center;
+        justify-content: center;
         a{
             border-radius: 3px 0px 0px 3px;
             border: 1px solid #D6D6D6;
@@ -803,6 +827,15 @@ export default {
     background: #FFF;
     box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
     margin-top: 24px;
+    .search-show-btn{
+        border-radius: 4px;
+        background:#D0D3D9;
+        width: 48px;
+        height: 4px;
+        display: block;
+        margin: 6px auto;
+        cursor: pointer;
+    }
     h5{
         margin: 0;
         color: rgba(0, 0, 0, 0.40);