操作手册支持拖拽

1

package.json

@@ -20,7 +20,6 @@
     "@rongcloud/imlib-next": "^5.4.3",
     "@shopify/draggable": "^1.0.0-beta.8",
     "@vant/touch-emulator": "^1.4.0",
-    "JSONPath": "^0.11.2",
     "axios": "0.18.1",
     "browserslist": "^4.18.1",
     "caniuse-lite": "^1.0.30001286",
@@ -35,6 +34,7 @@
     "i": "^0.3.6",
     "js-base64": "^3.6.0",
     "js-cookie": "2.2.0",
+    "JSONPath": "^0.11.2",
     "linq": "^3.2.2",
     "lodash": "^4.17.20",
     "mammoth": "^1.4.19",

src/layout/components/AppMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main">
+  <section class="app-main draggable-box">
     <!--   -->
     <transition name="fade-transform" mode="out-in">
       <div>
@@ -56,13 +56,16 @@
         </div>
       </el-dialog>
     </div>
-    <div
+    <div  class="draggable-item"  v-draggable ref="draggableItem">
+      <div
       class="optionBtn"
       v-if="!outOptionvisible && isShowBtn"
-      @click="openOptionMual"
+      @click.stop.prevent="openOptionMual"
     >
       操作手册
     </div>
+    </div>
+
 
     <!-- <div class="chart-join">
       <el-badge :is-dot="noReadNum > 0 ? true : false" class="item">
@@ -88,6 +91,7 @@
     <el-drawer
       title="操作手册"
       :visible.sync="outOptionvisible"
+
       size="410px"
       :append-to-body="true"
     >
@@ -182,6 +186,7 @@ import "quill/dist/quill.bubble.css";
 import { core, CoreEvent } from "./imkit";
 import * as RongIMLib from "@rongcloud/imlib-next";
 import { custom_service } from "./modal/chat.js";
+import draggable  from '@/utils/draggable'
 // 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
 // let libOption = { appkey: "c9kqb3rdc451j" };
 let libOption = {
@@ -215,6 +220,9 @@ export default {
     };
   },
   components: { serviceRemind, chatModel },
+  directives:{
+    draggable
+  },
   computed: {
     key() {
       return this.$route.path;
@@ -253,10 +261,8 @@ export default {
     } catch (e) {}
 
     this.init();
-
     // 获取未读数
     this.$bus.$on("getNoReadNum", obj => {
-      console.log(obj, "getNoReadNum");
       this.getNoReadMessage(obj);
     });
 
@@ -275,7 +281,6 @@ export default {
     init() {
       core.connect(this.$store.state.user.imToken).then(res => {
         if (res.code === RongIMLib.ErrorCode.SUCCESS) {
-          console.log("链接成功, 链接用户 id 为: ", res.data.userId);
           // this.isConnect = true;
           this.getNoReadMessage(true);
         } else {
@@ -289,8 +294,8 @@ export default {
       //   console.log("121212", message);
       // });
     },
+
     handleMessages(newMessage) {
-      console.log(newMessage, "newMessage");
       this.getNoReadMessage(true);
     },
     onOpenChatRoom() {
@@ -302,12 +307,12 @@ export default {
       if (status || this.chatVisible) {
         RongIMLib.getTotalUnreadCount().then(res => {
           if (res.code === 0) {
-            console.log(res.code, res);
+
             this.noReadNum = res.data || 0;
 
             this.$bus.$emit("getShowNums", this.noReadNum);
           } else {
-            console.log(res.code, res.msg, res);
+
           }
         });
       }
@@ -328,6 +333,11 @@ export default {
     },
     async openOptionMual() {
       // this.outOptionvisible = true;
+      let flag = this.$refs.draggableItem.getAttribute('data-flag')
+     if(flag == 'true'){
+      return
+     }
+
       await this.getMUal();
       this.outOptionvisible = true;
     },
@@ -342,7 +352,6 @@ export default {
         });
         this.optionList = res.data.rows;
 
-        console.log(this.$route);
       } catch (e) {
         console.log(e);
       }
@@ -424,9 +433,7 @@ export default {
   width: 35px;
   background-color: var(--color-primary);
   color: #fff;
-  position: fixed;
-  right: 0;
-  top: 250px;
+
   padding: 10px;
   border-radius: 8px;
   cursor: pointer;
@@ -544,6 +551,16 @@ export default {
   }
 }
 
+.draggable-box{
+  position: relative;
+  .draggable-item{
+    right: 0;
+  top: 250px;
+    position: absolute;
+  }
+}
+
+
 /*设置字体的大小*/
 </style>
 <style scoped>

src/utils/draggable.js

@@ -0,0 +1,44 @@
+const draggable = {
+  inserted: function (el) {
+    el.style.cursor = 'move'
+    let firstTime='',lastTime='';
+    el.onmousedown = function (e) {
+      el.setAttribute('data-flag',false)
+      firstTime = new Date().getTime();
+      let disx = e.pageX - el.offsetLeft
+      let disy = e.pageY - el.offsetTop
+      document.onmousemove = function (e) {
+
+
+        let x = e.pageX - disx
+        let y = e.pageY - disy
+        let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
+        let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
+
+
+        if (x < 0) {
+          x = 0
+        } else if (x > maxX) {
+          x = maxX
+        }
+
+        if (y < 0) {
+          y = 0
+        } else if (y > maxY) {
+          y = maxY
+        }
+
+        el.style.left = x + 'px'
+        el.style.top = y + 'px'
+        lastTime = new Date().getTime();
+        if( (lastTime - firstTime) < 200){
+          el.setAttribute('data-flag',true)
+          }
+      }
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null
+      }
+    }
+  },
+}
+export default draggable