♻️ https://github.com/siyuan-note/siyuan/issues/7676

app/src/assets/scss/business/_block.scss

@@ -23,91 +23,88 @@
       z-index: 206;
     }
 
-    &--move {
-      & > .block {
-        &__icons {
-          cursor: move;
-          border-radius: 4px 4px 0 0;
+    & > .block {
+      &__icons {
+        border-radius: 4px 4px 0 0;
 
-          .block__icon {
-            opacity: 1;
-          }
+        .block__icon {
+          opacity: 1;
         }
+      }
 
-        &__rd,
-        &__ld,
-        &__lt,
-        &__rt,
-        &__r,
-        &__l,
-        &__t,
-        &__d {
-          position: absolute;
-        }
+      &__rd,
+      &__ld,
+      &__lt,
+      &__rt,
+      &__r,
+      &__l,
+      &__t,
+      &__d {
+        position: absolute;
+      }
 
-        &__rd {
-          height: 16px;
-          width: 16px;
-          cursor: nwse-resize;
-          right: -8px;
-          bottom: -8px;
-        }
+      &__rd {
+        height: 16px;
+        width: 16px;
+        cursor: nwse-resize;
+        right: -8px;
+        bottom: -8px;
+      }
 
-        &__lt {
-          height: 16px;
-          width: 16px;
-          cursor: nwse-resize;
-          left: -8px;
-          top: -8px;
-        }
+      &__lt {
+        height: 16px;
+        width: 16px;
+        cursor: nwse-resize;
+        left: -8px;
+        top: -8px;
+      }
 
-        &__ld {
-          height: 16px;
-          width: 16px;
-          cursor: nesw-resize;
-          left: -8px;
-          bottom: -8px;
-        }
+      &__ld {
+        height: 16px;
+        width: 16px;
+        cursor: nesw-resize;
+        left: -8px;
+        bottom: -8px;
+      }
 
-        &__rt {
-          height: 16px;
-          width: 16px;
-          cursor: nesw-resize;
-          top: -8px;
-          right: -8px;
-        }
+      &__rt {
+        height: 16px;
+        width: 16px;
+        cursor: nesw-resize;
+        top: -8px;
+        right: -8px;
+      }
 
-        &__d {
-          height: 8px;
-          cursor: ns-resize;
-          left: 8px;
-          right: 8px;
-          bottom: -8px;
-        }
+      &__d {
+        height: 8px;
+        cursor: ns-resize;
+        left: 8px;
+        right: 8px;
+        bottom: -8px;
+      }
 
-        &__t {
-          height: 8px;
-          cursor: ns-resize;
-          left: 8px;
-          right: 8px;
-          top: -8px;
-        }
+      &__t {
+        height: 8px;
+        cursor: ns-resize;
+        left: 8px;
+        right: 8px;
+        top: -8px;
+      }
 
-        &__r {
-          width: 8px;
-          cursor: ew-resize;
-          top: 8px;
-          right: -8px;
-          bottom: 8px;
-        }
+      &__r {
+        width: 8px;
+        cursor: ew-resize;
+        top: 8px;
+        right: -8px;
+        bottom: 8px;
+      }
 
-        &__l {
-          width: 8px;
-          cursor: ew-resize;
-          top: 8px;
-          left: -8px;
-          bottom: 8px;
-        }
+      &__l {
+        width: 8px;
+        cursor: ew-resize;
+        top: 8px;
+        left: -8px;
+        bottom: 8px;
       }
     }
   }
@@ -173,7 +170,6 @@
       background-color: var(--b3-list-icon-hover);
     }
 
-
     &--show {
       opacity: 1;
 

app/src/block/Panel.ts

@@ -45,7 +45,7 @@ export class BlockPanel {
         this.isBacklink = options.isBacklink;
 
         this.element = document.createElement("div");
-        this.element.classList.add("block__popover", "block__popover--move", "block__popover--top");
+        this.element.classList.add("block__popover", "block__popover--top");
 
         const parentElement = hasClosestByClassName(this.targetElement, "block__popover", true);
         let level = 1;

app/src/dialog/index.ts

@@ -1,8 +1,10 @@
 import {genUUID} from "../util/genID";
 import {isMobile} from "../util/functions";
+import {hasClosestByClassName} from "../protyle/util/hasClosest";
+import {Constants} from "../constants";
 
 export class Dialog {
-    private destroyCallback: (options?:IObject) => void;
+    private destroyCallback: (options?: IObject) => void;
     public element: HTMLElement;
     private id: string;
     private disableClose: boolean;
@@ -13,7 +15,7 @@ export class Dialog {
         content: string,
         width?: string
         height?: string,
-        destroyCallback?: (options?:IObject) => void
+        destroyCallback?: (options?: IObject) => void
         disableClose?: boolean
         disableAnimation?: boolean
     }) {
@@ -55,11 +57,127 @@ export class Dialog {
                 this.element.classList.add("b3-dialog--open");
             });
         }
-        // https://github.com/siyuan-note/siyuan/issues/6783
-        window.siyuan.menus.menu.remove();
+        /// if !MOBILE
+        this.element.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
+
+            if (hasClosestByClassName(event.target, "block__icon")) {
+                return;
+            }
+            let iconsElement = hasClosestByClassName(event.target, "block__icons");
+            let type = "move";
+            let x = event.clientX - parseInt(this.element.style.left);
+            let y = event.clientY - parseInt(this.element.style.top);
+            const height = this.element.clientHeight;
+            const width = this.element.clientWidth;
+            if (!iconsElement) {
+                x = event.clientX;
+                y = event.clientY;
+                iconsElement = hasClosestByClassName(event.target, "block__rd") ||
+                    hasClosestByClassName(event.target, "block__r") ||
+                    hasClosestByClassName(event.target, "block__rt") ||
+                    hasClosestByClassName(event.target, "block__d") ||
+                    hasClosestByClassName(event.target, "block__l") ||
+                    hasClosestByClassName(event.target, "block__ld") ||
+                    hasClosestByClassName(event.target, "block__lt") ||
+                    hasClosestByClassName(event.target, "block__t");
+                if (!iconsElement) {
+                    return;
+                }
+                type = iconsElement.className;
+            }
+            const documentSelf = document;
+            this.element.style.userSelect = "none";
+
+            documentSelf.ondragstart = () => false;
+            // https://github.com/siyuan-note/siyuan/issues/6783
+            window.siyuan.menus.menu.remove();
+
+
+            documentSelf.onmousemove = (moveEvent: MouseEvent) => {
+                if (!this.element) {
+                    return;
+                }
+                if (type === "move") {
+                    let positionX = moveEvent.clientX - x;
+                    let positionY = moveEvent.clientY - y;
+                    if (positionX > window.innerWidth - width) {
+                        positionX = window.innerWidth - width;
+                    }
+                    if (positionY > window.innerHeight - height) {
+                        positionY = window.innerHeight - height;
+                    }
+                    this.element.style.left = Math.max(positionX, 0) + "px";
+                    this.element.style.top = Math.max(positionY, Constants.SIZE_TOOLBAR_HEIGHT) + "px";
+                } else {
+                    if (type === "block__r" &&
+                        moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth) {
+                        this.element.style.width = moveEvent.clientX - x + width + "px";
+                    } else if (type === "block__d" &&
+                        moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) {
+                        this.element.style.height = moveEvent.clientY - y + height + "px";
+                        this.element.style.maxHeight = "";
+                    } else if (type === "block__t" &&
+                        moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) {
+                        this.element.style.top = moveEvent.clientY + "px";
+                        this.element.style.maxHeight = "";
+                        this.element.style.height = (y - moveEvent.clientY + height) + "px";
+                    } else if (type === "block__l" &&
+                        moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200) {
+                        this.element.style.left = moveEvent.clientX + "px";
+                        this.element.style.width = (x - moveEvent.clientX + width) + "px";
+                    } else if (type === "block__rd" &&
+                        moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth &&
+                        moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) {
+                        this.element.style.height = moveEvent.clientY - y + height + "px";
+                        this.element.style.maxHeight = "";
+                        this.element.style.width = moveEvent.clientX - x + width + "px";
+                    } else if (type === "block__rt" &&
+                        moveEvent.clientX - x + width > 200 && moveEvent.clientX - x + width < window.innerWidth &&
+                        moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) {
+                        this.element.style.width = moveEvent.clientX - x + width + "px";
+                        this.element.style.top = moveEvent.clientY + "px";
+                        this.element.style.maxHeight = "";
+                        this.element.style.height = (y - moveEvent.clientY + height) + "px";
+                    } else if (type === "block__lt" &&
+                        moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200 &&
+                        moveEvent.clientY > Constants.SIZE_TOOLBAR_HEIGHT && y - moveEvent.clientY + height > 160) {
+                        this.element.style.left = moveEvent.clientX + "px";
+                        this.element.style.width = (x - moveEvent.clientX + width) + "px";
+                        this.element.style.top = moveEvent.clientY + "px";
+                        this.element.style.maxHeight = "";
+                        this.element.style.height = (y - moveEvent.clientY + height) + "px";
+                    } else if (type === "block__ld" &&
+                        moveEvent.clientX > 0 && x - moveEvent.clientX + width > 200 &&
+                        moveEvent.clientY - y + height > 160 && moveEvent.clientY - y + height < window.innerHeight - Constants.SIZE_TOOLBAR_HEIGHT) {
+                        this.element.style.left = moveEvent.clientX + "px";
+                        this.element.style.width = (x - moveEvent.clientX + width) + "px";
+                        this.element.style.height = moveEvent.clientY - y + height + "px";
+                        this.element.style.maxHeight = "";
+                    }
+                }
+            };
+
+            documentSelf.onmouseup = () => {
+                if (!this.element) {
+                    return;
+                }
+                if (window.siyuan.dragElement) {
+                    // 反向链接拖拽 https://ld246.com/article/1632915506502
+                    window.siyuan.dragElement.style.opacity = "";
+                    window.siyuan.dragElement = undefined;
+                }
+                this.element.style.userSelect = "auto";
+                documentSelf.onmousemove = null;
+                documentSelf.onmouseup = null;
+                documentSelf.ondragstart = null;
+                documentSelf.onselectstart = null;
+                documentSelf.onselect = null;
+            };
+        });
+        /// #endif
     }
 
-    public destroy(options?:IObject) {
+    public destroy(options?: IObject) {
         this.element.remove();
         // https://github.com/siyuan-note/siyuan/issues/6783
         window.siyuan.menus.menu.remove();
@@ -93,5 +211,4 @@ export class Dialog {
             }
         });
     }
-
 }

app/src/protyle/toolbar/index.ts

@@ -888,22 +888,22 @@ export class Toolbar {
             this.subElement.style.width = "";
             this.subElement.style.padding = "0";
         }
-        this.subElement.innerHTML = `<div ${(isPin && this.subElement.firstElementChild.getAttribute("data-drag") === "true") ? 'data-drag="true"' : ""} class="block__popover--move"><div class="block__icons block__icons--menu fn__flex">
+        this.subElement.innerHTML = `<div ${(isPin && this.subElement.firstElementChild.getAttribute("data-drag") === "true") ? 'data-drag="true"' : ""}><div class="block__icons block__icons--menu fn__flex">
     ${title}
-    <span class="fn__flex-1"></span>
-    <button data-type="refresh" class="block__icon b3-tooltips b3-tooltips__nw${(isPin && !this.subElement.querySelector('[data-type="refresh"]').classList.contains("block__icon--active")) ? "" : " block__icon--active"}${types.includes("NodeBlockQueryEmbed") ? " fn__none" : ""}" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href="#iconRefresh"></use></svg></button>
+    <span class="fn__flex-1 fn__space"></span>
+    <button data-type="refresh" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw${(isPin && !this.subElement.querySelector('[data-type="refresh"]').classList.contains("block__icon--active")) ? "" : " block__icon--active"}${types.includes("NodeBlockQueryEmbed") ? " fn__none" : ""}" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href="#iconRefresh"></use></svg></button>
     <span class="fn__space"></span>
-    <button data-type="before" class="block__icon b3-tooltips b3-tooltips__nw${protyle.disabled ? " fn__none" : ""}" aria-label="${window.siyuan.languages["insert-before"]}"><svg><use xlink:href="#iconBefore"></use></svg></button>
+    <button data-type="before" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw${protyle.disabled ? " fn__none" : ""}" aria-label="${window.siyuan.languages["insert-before"]}"><svg><use xlink:href="#iconBefore"></use></svg></button>
     <span class="fn__space${protyle.disabled ? " fn__none" : ""}"></span>
-    <button data-type="after" class="block__icon b3-tooltips b3-tooltips__nw${protyle.disabled ? " fn__none" : ""}" aria-label="${window.siyuan.languages["insert-after"]}"><svg><use xlink:href="#iconAfter"></use></svg></button>
+    <button data-type="after" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw${protyle.disabled ? " fn__none" : ""}" aria-label="${window.siyuan.languages["insert-after"]}"><svg><use xlink:href="#iconAfter"></use></svg></button>
     <span class="fn__space${protyle.disabled ? " fn__none" : ""}"></span>
-    <button data-type="export" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.export} ${window.siyuan.languages.image}"><svg><use xlink:href="#iconImage"></use></svg></button>
+    <button data-type="export" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.export} ${window.siyuan.languages.image}"><svg><use xlink:href="#iconImage"></use></svg></button>
     <span class="fn__space"></span>
-    <button data-type="pin" class="block__icon b3-tooltips b3-tooltips__nw${isPin ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.pin}"><svg><use xlink:href="#iconPin"></use></svg></button>
+    <button data-type="pin" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw${isPin ? " block__icon--active" : ""}" aria-label="${window.siyuan.languages.pin}"><svg><use xlink:href="#iconPin"></use></svg></button>
     <span class="fn__space"></span>
-    <button data-type="close" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></button>
+    <button data-type="close" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></button>
 </div>
-<textarea ${protyle.disabled ? " readonly" : ""} spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh"></textarea></div>`;
+<textarea ${protyle.disabled ? " readonly" : ""} spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh;min-height: 48px;min-width: 268px"></textarea></div>`;
         const autoHeight = () => {
             textElement.style.height = textElement.scrollHeight + "px";
             if (isMobile()) {