feat: 题卡元素拖动优化

card/components/common/ElementResize.vue

@@ -157,23 +157,25 @@ export default {
   },
   methods: {
     initControlPoints() {
-      const posName = {
-        l: "Left",
-        r: "Right",
-        t: "Top",
-        b: "Bottom",
+      const actions = {
+        l: this.moveLeftPoint,
+        r: this.moveRightPoint,
+        t: this.moveTopPoint,
+        b: this.moveBottomPoint,
+        lt: this.moveLeftTopPoint,
+        rt: this.moveRightTopPoint,
+        lb: this.moveLeftBottomPoint,
+        rb: this.moveRightBottomPoint,
       };
+
       this.controlPoints = this.active.map((type) => {
-        const posFullName = type
-          .split("")
-          .map((item) => {
-            return posName[item];
-          })
-          .join("");
         return {
           classes: ["control-point", `control-point-${type}`],
-          movePoint: this[`move${posFullName}Point`],
-          movePointOver: this.moveOver,
+          movePoint: actions[type],
+          movePointOver: (data) => {
+            actions[type](data);
+            this.movePointOver();
+          },
         };
       });
     },
@@ -190,6 +192,9 @@ export default {
     fetchValidSizePos(sizePos, actionType) {
       if (sizePos.w <= this.minWidth) {
         sizePos.w = this.minWidth;
+
+        if (actionType.includes("l"))
+          sizePos.x = this.lastSizePos.x + this.lastSizePos.w - sizePos.w;
       }
       if (this.maxWidth !== 0 && sizePos.w >= this.maxWidth) {
         sizePos.w = this.maxWidth;
@@ -197,7 +202,11 @@ export default {
 
       if (sizePos.h <= this.minHeight) {
         sizePos.h = this.minHeight;
+
+        if (actionType.includes("t"))
+          sizePos.y = this.lastSizePos.y + this.lastSizePos.h - sizePos.h;
       }
+
       if (this.maxHeight !== 0 && sizePos.h >= this.maxHeight) {
         sizePos.h = this.maxHeight;
       }
@@ -216,36 +225,38 @@ export default {
       if (this.fitParentTypeWidth) {
         if (sizePos.x <= 0) {
           sizePos.x = 0;
-          if (actionType.includes("left")) sizePos.w = this.lastSizePos.w;
+          if (actionType.includes("l")) sizePos.w = this.lastSizePos.w;
         }
 
-        if (sizePos.x + sizePos.w > this.parentNodeSize.w) {
-          sizePos.x = this.lastSizePos.x;
-          sizePos.w = this.parentNodeSize.w - sizePos.x;
+        if (sizePos.x + sizePos.w >= this.parentNodeSize.w) {
+          if (actionType === "move") {
+            sizePos.x = this.parentNodeSize.w - sizePos.w;
+          } else {
+            sizePos.w = this.parentNodeSize.w - sizePos.x;
+          }
         }
       }
 
       if (this.fitParentTypeHeight) {
         if (this.positionType === "relative") {
           const elOffsetTop = this.$el.offsetTop;
-          if (this.sizePosOrigin.y - sizePos.y >= this.offsetTopOrigin) {
-            sizePos.h = this.lastSizePos.h;
-            sizePos.y = this.sizePosOrigin.y - this.offsetTopOrigin;
-          }
+          // relative目前只开放bottom编辑，这里也只处理这中场景
           if (elOffsetTop + sizePos.h >= this.parentNodeSize.h) {
-            sizePos.y = this.lastSizePos.y;
-            sizePos.h = this.lastSizePos.h;
-            // TODO:这里如果拖动太快，会有问题
-            // console.log(this.parentNodeSize.h, elOffsetTop, sizePos.h);
+            sizePos.h = this.parentNodeSize.h - elOffsetTop;
           }
         } else {
           if (sizePos.y <= 0) {
             sizePos.y = 0;
-            if (actionType.includes("top")) sizePos.h = this.lastSizePos.h;
+            if (actionType.includes("t")) {
+              sizePos.h = this.lastSizePos.h + this.lastSizePos.y;
+            }
           }
           if (sizePos.y + sizePos.h > this.parentNodeSize.h) {
-            sizePos.y = this.lastSizePos.y;
-            sizePos.h = this.parentNodeSize.h - sizePos.y;
+            if (actionType === "move") {
+              sizePos.y = this.parentNodeSize.h - sizePos.h;
+            } else {
+              sizePos.h = this.parentNodeSize.h - sizePos.y;
+            }
           }
         }
       }
@@ -283,22 +294,22 @@ export default {
     },
     moveLeftPoint({ left }) {
       const sp = { ...this.sizePos, ...this.getLeftSize(left) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "left") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "l") };
       this.emitChange();
     },
     moveRightPoint({ left }) {
       const sp = { ...this.sizePos, ...this.getRightSize(left) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "right") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "r") };
       this.emitChange();
     },
     moveTopPoint({ top }) {
       const sp = { ...this.sizePos, ...this.getTopSize(top) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "top") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "t") };
       this.emitChange();
     },
     moveBottomPoint({ top }) {
       const sp = { ...this.sizePos, ...this.getBottomSize(top) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "bottom") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "b") };
       this.emitChange();
     },
     moveLeftTopPoint({ left, top }) {
@@ -307,7 +318,7 @@ export default {
         ...this.getLeftSize(left),
         ...this.getTopSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "left-top") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "lt") };
       this.emitChange();
     },
     moveRightTopPoint({ left, top }) {
@@ -316,7 +327,7 @@ export default {
         ...this.getRightSize(left),
         ...this.getTopSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "right-top") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "rt") };
       this.emitChange();
     },
     moveLeftBottomPoint({ left, top }) {
@@ -325,7 +336,7 @@ export default {
         ...this.getLeftSize(left),
         ...this.getBottomSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "left-bottom") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "lb") };
       this.emitChange();
     },
     moveRightBottomPoint({ left, top }) {
@@ -334,15 +345,14 @@ export default {
         ...this.getRightSize(left),
         ...this.getBottomSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "right-bottom") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "rb") };
       this.emitChange();
     },
-    moveOver() {
+    movePointOver() {
       this.sizePosOrigin = { ...this.sizePos };
       this.lastSizePos = { ...this.sizePos };
       if (this.positionType === "relative")
         this.offsetTopOrigin = this.$el.offsetTop < 0 ? 0 : this.$el.offsetTop;
-      this.emitChange();
       this.$emit("resize-over", this.sizePos);
     },
     moveStart() {
@@ -361,9 +371,11 @@ export default {
       this.sizePos = { ...this.fetchValidSizePos(sp, "move") };
       this.emitChange();
     },
-    moveElementOver() {
+    moveElementOver({ left, top }) {
       if (!this.move) return;
-      this.moveOver();
+      this.moveElement({ left, top });
+
+      this.movePointOver();
     },
     emitChange() {
       this.$emit("input", this.sizePos);

card/directives/move-ele.js

@@ -25,7 +25,11 @@ module.exports = {
       if (modifiers.stop) {
         e.stopPropagation();
       }
-      value.moveStop && value.moveStop();
+
+      let left = e.pageX - _x;
+      let top = e.pageY - _y;
+      value.moveStop && value.moveStop({ left, top });
+
       document.removeEventListener("mousemove", moveHandle);
       document.removeEventListener("mouseup", upHandle);
     };