feat: box添加限制，不会移动到屏幕外

src/components/box.vue

@@ -81,10 +81,11 @@ let bottomB: HTMLDivElement;
 let drag: HTMLElement;
 let size: HTMLElement;
 
-const width = ref(
+const maxWidth = window.innerWidth;
-    isMobile ? window.innerWidth - 100 : window.innerWidth * 0.175
+const maxHeight = window.innerHeight;
-);
+
-const height = ref(isMobile ? 250 : window.innerHeight - 100);
+const width = ref(isMobile ? maxWidth - 100 : maxHeight * 0.175);
+const height = ref(isMobile ? 250 : maxHeight - 100);
 const left = ref(isMobile ? 30 : 50);
 const top = ref(isMobile ? 30 : 50);
 
@@ -103,13 +104,48 @@ async function click() {
 let lastX = 0;
 let lastY = 0;
 
+function clampX(x: number) {
+    if (x < 16) x = 16;
+    const mx = maxWidth - 16 - main.offsetWidth;
+    if (x > mx) x = mx;
+    return x;
+}
+
+function clampY(y: number) {
+    if (y < 16) y = 16;
+    const my = maxHeight - 16 - main.offsetHeight;
+    if (y > my) y = my;
+    return y;
+}
+
+function clampPos(x: number, y: number) {
+    return { x: clampX(x), y: clampY(y) };
+}
+
+function clampWidth(w: number) {
+    if (w < 16) w = 16;
+    const mw = maxWidth - 16 - main.offsetLeft;
+    if (w > mw) w = mw;
+    return w;
+}
+
+function clampHeight(h: number) {
+    if (h < 16) h = 16;
+    const mh = maxHeight - 16 - main.offsetTop;
+    if (h > mh) h = mh;
+    return h;
+}
+
+function clampSize(w: number, h: number) {
+    return { w: clampWidth(w), h: clampHeight(h) };
+}
+
 function dragFn(x: number, y: number) {
-    const ox = main.offsetLeft;
+    const { x: tx, y: ty } = clampPos(x, y);
-    const oy = main.offsetTop;
+    left.value = tx;
-    left.value = ox + x - lastX;
+    top.value = ty;
-    top.value = oy + y - lastY;
+    main.style.left = `${tx}px`;
-    main.style.left = `${left.value}px`;
+    main.style.top = `${ty}px`;
-    main.style.top = `${top.value}px`;
 
     moveSelected.value = true;
     clearTimeout(moveTimeout);
@@ -119,35 +155,40 @@ function dragFn(x: number, y: number) {
 
 let right = left.value + width.value;
 function leftDrag(x: number, y: number) {
-    main.style.left = `${x}px`;
+    const tx = clampX(x);
-    width.value = right - x;
+    main.style.left = `${tx}px`;
-    left.value = x;
+    width.value = right - tx;
+    left.value = tx;
     main.style.width = `${width.value}px`;
 }
 
 let bottom = top.value + height.value;
 function topDrag(x: number, y: number) {
-    main.style.top = `${y}px`;
+    const ty = clampY(y);
-    height.value = bottom - y;
+    main.style.top = `${ty}px`;
-    top.value = y;
+    height.value = bottom - ty;
+    top.value = ty;
     main.style.height = `${height.value}px`;
 }
 
 function rightDrag(x: number, y: number) {
-    width.value = x - main.offsetLeft;
+    const w = clampWidth(x - main.offsetLeft);
-    main.style.width = `${width.value}px`;
+    width.value = w;
+    main.style.width = `${w}px`;
 }
 
 function bottomDrag(x: number, y: number) {
-    height.value = y - main.offsetTop;
+    const h = clampHeight(y - main.offsetTop);
-    main.style.height = `${height.value}px`;
+    height.value = h;
+    main.style.height = `${h}px`;
 }
 
 function resizeBox(x: number, y: number) {
-    width.value = x - main.offsetLeft;
+    const { w, h } = clampSize(x - main.offsetLeft, y - main.offsetTop);
-    height.value = y - main.offsetTop;
+    width.value = w;
-    main.style.width = `${width.value}px`;
+    height.value = h;
-    main.style.height = `${height.value}px`;
+    main.style.width = `${w}px`;
+    main.style.height = `${h}px`;
 }
 
 function resize() {