1

src/modules/admin/ocr/OcrTest.vue

@@ -256,82 +256,49 @@ export default {
         const isToTop = _this.dragData.top < 0;
         const isToBottom = _this.dragData.top > 0;
         // 边界判断可以在这里添加 ↓
+        //正向判断的判断分支太多，于是选择反向判断
         if (isToRight) {
           if (
-            parseFloat(_this.$refs.centerBox.style.left) < 0 ||
-            parseFloat(_this.$refs.centerBox.style.left) +
-              _this.$refs.centerBox.offsetWidth +
-              _this.dragData.left <
-              this.$refs.dragOuter.offsetWidth - 40
+            _this.$refs.centerBox.offsetWidth +
+              parseFloat(_this.$refs.centerBox.style.left) >=
+            _this.maxWidth
           ) {
-            _this.$refs.centerBox.style.left = _this.dragData.left + "px";
+            return false;
           }
         }
-
         if (isToLeft) {
-          //todo
+          if (
+            parseFloat(_this.$refs.centerBox.style.left) <= 0 &&
+            (_this.$refs.centerBox.offsetWidth <= _this.maxWidth ||
+              _this.$refs.centerBox.offsetWidth +
+                parseFloat(_this.$refs.centerBox.style.left) <=
+                _this.maxWidth)
+          ) {
+            return false;
+          }
         }
-
-        // 设置元素的位置
-
-        // if (
-        //   _this.$refs.centerBox.clientWidth >
-        //   _this.$refs.dragOuter.offsetWidth - 40
-        // ) {
-        //   if (
-        //     (_this.dragData.left <= 0 &&
-        //       _this.$refs.centerBox.clientWidth + _this.dragData.left >=
-        //         _this.$refs.dragOuter.offsetWidth - 40) ||
-        //     (parseFloat(_this.$refs.centerBox.style.left) < 0 &&
-        //       _this.dragData.left >
-        //         parseFloat(_this.$refs.centerBox.style.left)) ||
-        //     (_this.dragData.left >= 0 &&
-        //       _this.dragData.left <
-        //         parseFloat(_this.$refs.centerBox.style.left))
-        //   ) {
-        //     _this.$refs.centerBox.style.left = _this.dragData.left + "px";
-        //   }
-        // } else {
-        //   if (
-        //     _this.$refs.centerBox.clientWidth + _this.dragData.left <=
-        //       _this.$refs.dragOuter.offsetWidth - 40 &&
-        //     (_this.dragData.left >= 0 ||
-        //       (parseFloat(_this.$refs.centerBox.style.left) < 0 &&
-        //         _this.dragData.left >
-        //           parseFloat(_this.$refs.centerBox.style.left)))
-        //   ) {
-        //     _this.$refs.centerBox.style.left = _this.dragData.left + "px";
-        //   }
-        // }
-
-        // if (
-        //   _this.$refs.centerBox.clientHeight >
-        //   _this.$refs.dragOuter.offsetHeight - 40
-        // ) {
-        //   if (
-        //     (_this.dragData.top <= 0 &&
-        //       _this.$refs.centerBox.clientHeight + _this.dragData.top >=
-        //         _this.$refs.dragOuter.offsetHeight - 40) ||
-        //     (parseFloat(_this.$refs.centerBox.style.top) < 0 &&
-        //       _this.dragData.top >
-        //         parseFloat(_this.$refs.centerBox.style.top)) ||
-        //     (_this.dragData.top >= 0 &&
-        //       _this.dragData.top < parseFloat(_this.$refs.centerBox.style.top))
-        //   ) {
-        //     _this.$refs.centerBox.style.top = _this.dragData.top + "px";
-        //   }
-        // } else {
-        //   if (
-        //     _this.$refs.centerBox.clientHeight + _this.dragData.top <=
-        //       _this.$refs.dragOuter.offsetHeight - 40 &&
-        //     (_this.dragData.top >= 0 ||
-        //       (parseFloat(_this.$refs.centerBox.style.top) < 0 &&
-        //         _this.dragData.top >
-        //           parseFloat(_this.$refs.centerBox.style.top)))
-        //   ) {
-        //     _this.$refs.centerBox.style.top = _this.dragData.top + "px";
-        //   }
-        // }
+        if (isToTop) {
+          if (
+            parseFloat(_this.$refs.centerBox.style.top) <= 0 &&
+            (_this.$refs.centerBox.offsetHeight <= _this.maxHeight ||
+              _this.$refs.centerBox.offsetHeight +
+                parseFloat(_this.$refs.centerBox.style.top) <=
+                _this.maxHeight)
+          ) {
+            return false;
+          }
+        }
+        if (isToBottom) {
+          if (
+            _this.$refs.centerBox.offsetHeight +
+              parseFloat(_this.$refs.centerBox.style.top) >=
+            _this.maxHeight
+          ) {
+            return false;
+          }
+        }
+        _this.$refs.centerBox.style.left = _this.dragData.left + "px";
+        _this.$refs.centerBox.style.top = _this.dragData.top + "px";
       }
       // 添加鼠标抬起事件，鼠标抬起，将事件移除
       document.addEventListener("mouseup", function () {
@@ -523,6 +490,7 @@ export default {
             user-select: none; /* 不可选中,为了拖拽时不让文字高亮 */
             position: absolute;
             cursor: move;
+            font-size: 0;
             & > img {
               // max-width: none;
               // max-height: none;