zydx-plus 1.35.499 → 1.35.500

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.499",
+  "version": "1.35.500",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -50,7 +50,8 @@
     "react-dom": "^18.2.0",
     "tldraw": "^2.0.2",
     "@tldraw/editor": "^2.0.2",
-    "buffer": "^5.7.1"
+    "buffer": "^5.7.1",
+    "interactjs": "^1.10.27"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @click.stop="dragTap">
     <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
-           <span @mousedown.stop="mousedown" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
+           <span class="draggable" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
       <div class="drag-i">
 <!--        <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>-->
 <!--        <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>-->
@@ -17,9 +17,9 @@
         <slot name="content"></slot>
       </div>
       <div v-show="!fixedStart&&!autoHeight">
-        <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
+<!--        <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
         <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
-        <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
+<!--        <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
       </div>
     </div>
     <div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart&&!autoHeight">
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import interact from 'interactjs'
 export default {
   name: "zydx-drag-popup",
   data() {
@@ -163,11 +164,18 @@ export default {
     }
   },
   mounted() {
+    let that = this
     this.id = Math.random().toString(36).substr(2);
     this.init()
     // 全局监听鼠标抬起事件
-    document.addEventListener('mousemove', this.mousemove);
-    document.addEventListener('mouseup', this.mouseup);
+    interact('.draggable').draggable({
+      listeners: {
+        move (event) {
+          that.y = event.rect.top
+          that.x = event.rect.left
+        }
+      }
+    })
     document.addEventListener('mouseup', this.footUp);
     this.$nextTick(() => {
       this.$emit('updateDrag', {
@@ -297,38 +305,6 @@ export default {
       })
       this.footIsMove = false;
     },
-    mousedown(event) {
-      event.preventDefault()
-      //鼠标按下事件
-      this.leftOffset = event.offsetX;
-      this.topOffset = event.offsetY;
-      this.isMove = true;
-      this.dragTap()
-    },
-    //鼠标移动
-    mousemove(event) {
-      if (this.state) return;
-      if (!this.isMove) return;
-      this.x = event.clientX - this.leftOffset;
-      this.y = event.clientY - this.topOffset;
-      // 边界判断
-      if (this.x < -this.footRightOffset / 2) {
-        this.x = -this.footRightOffset / 2
-      }
-      if (this.x > this.clientWidth - this.footRightOffset + this.footRightOffset / 2) {
-        this.x = this.clientWidth - this.footRightOffset + this.footRightOffset / 2
-      }
-      if (this.y < 0) {
-        this.y = 0
-      }
-      if (this.y > this.clientHeight - this.footDownOffset + this.footDownOffset / 2) {
-        this.y = this.clientHeight - this.footDownOffset + this.footDownOffset / 2
-      }
-    },
-    //鼠标抬起
-    mouseup() {
-      this.isMove = false;
-    },
     enlarge() {
       this.state = false
       let clientWidth = document.documentElement.clientWidth;

package/src/components/dragPopup2/src/dragPopup.vue

@@ -2,7 +2,7 @@
   <teleport to="body">
     <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @click.stop="dragTap">
       <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
-           <span @mousedown.stop="mousedown" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
+           <span :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
         <div class="drag-i">
           <!--        <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>-->
           <!--        <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>-->
@@ -18,9 +18,9 @@
           <slot name="content"></slot>
         </div>
         <div v-show="!fixedStart&&!autoHeight">
-          <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>
+<!--          <i :class="{'drag-down2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-down" v-if="dragStatus" @mousedown.stop="footDown($event,'d')" @mouseup.stop="footUp"></i>-->
           <i :class="{'drag-in2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-in" v-if="dragStatus" @mousedown.stop="footDown($event,'in')" @mouseup.stop="footUp"></i>
-          <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>
+<!--          <i :class="{'drag-right2':!(dragStatus&&dragTextShow&&!fixedStart&&!autoHeight)}" class="drag-right" v-if="dragStatus" @mousedown.stop="footDown($event,'r')" @mouseup.stop="footUp"></i>-->
         </div>
       </div>
       <div class="down-text" v-if="dragStatus&&dragTextShow&&!fixedStart&&!autoHeight">
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import interact from 'interactjs'
 export default {
   name: "zydx-drag-popup2",
   data() {
@@ -165,11 +166,17 @@ export default {
     }
   },
   mounted() {
+    const that = this
     this.id = Math.random().toString(36).substr(2);
     this.init()
-    // 全局监听鼠标抬起事件
-    document.addEventListener('mousemove', this.mousemove);
-    document.addEventListener('mouseup', this.mouseup);
+    interact('.draggable').draggable({
+      listeners: {
+        move (event) {
+          that.y = event.rect.top
+          that.x = event.rect.left
+        }
+      }
+    })
     document.addEventListener('mouseup', this.footUp);
     this.$nextTick(() => {
       this.$emit('updateDrag', {
@@ -299,38 +306,6 @@ export default {
       })
       this.footIsMove = false;
     },
-    mousedown(event) {
-      event.preventDefault()
-      //鼠标按下事件
-      this.leftOffset = event.offsetX;
-      this.topOffset = event.offsetY;
-      this.isMove = true;
-      this.dragTap()
-    },
-    //鼠标移动
-    mousemove(event) {
-      if (this.state) return;
-      if (!this.isMove) return;
-      this.x = event.clientX - this.leftOffset;
-      this.y = event.clientY - this.topOffset;
-      // 边界判断
-      if (this.x < -this.footRightOffset / 2) {
-        this.x = -this.footRightOffset / 2
-      }
-      if (this.x > this.clientWidth - this.footRightOffset + this.footRightOffset / 2) {
-        this.x = this.clientWidth - this.footRightOffset + this.footRightOffset / 2
-      }
-      if (this.y < 0) {
-        this.y = 0
-      }
-      if (this.y > this.clientHeight - this.footDownOffset + this.footDownOffset / 2) {
-        this.y = this.clientHeight - this.footDownOffset + this.footDownOffset / 2
-      }
-    },
-    //鼠标抬起
-    mouseup() {
-      this.isMove = false;
-    },
     enlarge() {
       this.state = false
       let clientWidth = document.documentElement.clientWidth;

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.499',
+    version: '1.35.500',
     install,
     Calendar,
     Message,