zydx-plus 1.35.508 → 1.35.510

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.508",
+  "version": "1.35.510",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

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

@@ -1,10 +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"
-            @mousemove.stop="mousemove"
-            @mouseup.stop="mouseup"
-            @mouseleave.stop="mousemove" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
+      <span :id="'draggable' + id" :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>
@@ -20,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">
@@ -37,6 +34,8 @@
 </template>
 
 <script>
+import interact from "interactjs";
+
 export default {
   name: "zydx-drag-popup",
   data() {
@@ -165,12 +164,12 @@ export default {
       deep: true
     }
   },
+  created() {
+    this.id = Math.random().toString(36).substr(2)
+  },
   mounted() {
-    this.id = Math.random().toString(36).substr(2);
     this.init()
     // 全局监听鼠标抬起事件
-    document.addEventListener('mousemove', this.mousemove);
-    document.addEventListener('mouseup', this.mouseup);
     document.addEventListener('mouseup', this.footUp);
     this.$nextTick(() => {
       this.$emit('updateDrag', {
@@ -244,6 +243,7 @@ export default {
       this.$emit('dragStatus')
     },
     init() {
+      const that = this
       if(this.fixedStart) {
         const wid = document.getElementById('app').offsetWidth
         this.x = this.left + (wid-this.initWidth)/2
@@ -254,6 +254,31 @@ export default {
         this.x = this.clientWidth / 2 - this.footRightOffset / 2;
         this.y = this.clientHeight / 2 - this.footDownOffset / 2;
       }
+      setTimeout(() => {
+        interact(`#draggable${that.id}`).draggable({
+          listeners: {
+            start (event) {
+              that.dragTap()
+            },
+            move (event) {
+              that.y = event.rect.top
+              that.x = event.rect.left
+              if (that.x < -that.footRightOffset / 2) {
+                that.x = -that.footRightOffset / 2
+              }
+              if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
+                that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
+              }
+              if (that.y < 0) {
+                that.y = 0
+              }
+              if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
+                that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
+              }
+            }
+          }
+        })
+      },0)
     },
     getWH(v) {
       this.transAll = true
@@ -275,7 +300,7 @@ export default {
       if (this.direction === 'd') {
         this.footDownOffset = event.clientY - this.y;
       } else if (this.direction === 'in') {
-        this.footDownOffset = event.clientX - this.x;
+        this.footDownOffset = event.clientY - this.y;
         this.footRightOffset = event.clientX - this.x;
       } else if (this.direction === 'r') {
         this.footRightOffset = event.clientX - this.x;
@@ -300,38 +325,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

@@ -306,7 +306,7 @@ export default {
       if (this.direction === 'd') {
         this.footDownOffset = event.clientY - this.y;
       } else if (this.direction === 'in') {
-        this.footDownOffset = event.clientX - this.x;
+        this.footDownOffset = event.clientY - this.y;
         this.footRightOffset = event.clientX - this.x;
       } else if (this.direction === 'r') {
         this.footRightOffset = event.clientX - this.x;

package/src/index.js

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