🎨 #10730

app/src/layout/Wnd.ts

@@ -3,8 +3,11 @@ import {genUUID} from "../util/genID";
 import {
     fixWndFlex1,
     getInstanceById,
-    getWndByLayout, JSONToCenter,
+    getWndByLayout,
-    newModelByInitData, pdfIsLoading, saveLayout,
+    JSONToCenter,
+    newModelByInitData,
+    pdfIsLoading,
+    saveLayout,
     setPanelFocus,
     switchWnd
 } from "./util";
@@ -20,7 +23,7 @@ import {
 } from "../protyle/util/hasClosest";
 import {Constants} from "../constants";
 /// #if !BROWSER
-import {webFrame, ipcRenderer} from "electron";
+import {ipcRenderer, webFrame} from "electron";
 import {setModelsHash, setTabPosition} from "../window/setHeader";
 /// #endif
 import {Search} from "../search";
@@ -198,7 +201,10 @@ export class Wnd {
             }
         });
         let dragleaveTimeout: number;
+        let headerDragCounter = 0;
         this.headersElement.parentElement.addEventListener("dragleave", function () {
+            headerDragCounter--;
+            if (headerDragCounter === 0) {
                 clearTimeout(dragleaveTimeout);
                 // 窗口拖拽到新窗口时，不 drop 无法移除 clone 的元素
                 dragleaveTimeout = window.setTimeout(() => {
@@ -208,6 +214,11 @@ export class Wnd {
                 }, 1000);
                 const it = this as HTMLElement;
                 it.classList.remove("layout-tab-bars--drag");
+            }
+        });
+        this.headersElement.parentElement.addEventListener("dragenter", (event) => {
+            event.preventDefault();
+            headerDragCounter++;
         });
         this.headersElement.parentElement.addEventListener("drop", function (event: DragEvent & {
             target: HTMLElement

app/src/layout/dock/Files.ts

@@ -451,7 +451,9 @@ export class Files extends Model {
                 event.preventDefault();
                 return;
             }
-            liElement.classList.remove("dragover__top", "dragover__bottom", "dragover");
+            this.element.querySelectorAll(".dragover, .dragover__bottom, .dragover__top").forEach((item: HTMLElement) => {
+                item.classList.remove("dragover", "dragover__bottom", "dragover__top");
+            });
             let gutterType = "";
             for (const item of event.dataTransfer.items) {
                 if (item.type.startsWith(Constants.SIYUAN_DROP_GUTTER)) {
@@ -510,10 +512,18 @@ export class Files extends Model {
             liElement.classList.add("dragover");
             event.preventDefault();
         });
+        let counter = 0;
         this.element.addEventListener("dragleave", () => {
+            counter--;
+            if (counter === 0) {
                 this.element.querySelectorAll(".dragover, .dragover__bottom, .dragover__top").forEach((item: HTMLElement) => {
                     item.classList.remove("dragover", "dragover__bottom", "dragover__top");
                 });
+            }
+        });
+        this.element.addEventListener("dragenter", (event) => {
+            event.preventDefault();
+            counter++;
         });
         this.element.addEventListener("drop", async (event: DragEvent & { target: HTMLElement }) => {
             const newElement = this.element.querySelector(".dragover, .dragover__bottom, .dragover__top");

app/src/protyle/render/av/blockAttr.ts

@@ -264,17 +264,27 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
                 }
                 event.preventDefault();
                 const nodeRect = targetElement.getBoundingClientRect();
-                targetElement.classList.remove("dragover__bottom", "dragover__top");
+                element.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => {
+                    item.classList.remove("dragover__bottom", "dragover__top");
+                });
                 if (event.clientY > nodeRect.top + nodeRect.height / 2) {
                     targetElement.classList.add("dragover__bottom");
                 } else {
                     targetElement.classList.add("dragover__top");
                 }
             });
+            let counter = 0
             element.addEventListener("dragleave", () => {
+                counter--;
+                if (counter === 0) {
                     element.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => {
                         item.classList.remove("dragover__bottom", "dragover__top");
                     });
+                }
+            });
+            element.addEventListener("dragenter", (event) => {
+                event.preventDefault();
+                counter++;
             });
             element.addEventListener("dragend", () => {
                 if (window.siyuan.dragElement) {

app/src/protyle/render/av/openMenuPanel.ts

@@ -1,10 +1,9 @@
 import {transaction} from "../../wysiwyg/transaction";
 import {fetchPost} from "../../../util/fetch";
-import {addCol} from "./col";
+import {addCol, bindEditEvent, duplicateCol, getColIconByType, getEditHTML} from "./col";
-import {bindEditEvent, duplicateCol, getColIconByType, getEditHTML} from "./col";
 import {setPosition} from "../../../util/setPosition";
 import {hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
-import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, removeCellOption} from "./select";
+import {addColOptionOrCell, bindSelectEvent, getSelectHTML, removeCellOption, setColOption} from "./select";
 import {addFilter, getFiltersHTML, setFilter} from "./filter";
 import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
 import {bindDateEvent, getDateHTML} from "./date";
@@ -457,7 +456,9 @@ export const openMenuPanel = (options: {
             event.preventDefault();
             if (dragoverElement && targetElement.isSameNode(dragoverElement)) {
                 const nodeRect = targetElement.getBoundingClientRect();
-                targetElement.classList.remove("dragover__bottom", "dragover__top");
+                avPanelElement.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => {
+                    item.classList.remove("dragover__bottom", "dragover__top");
+                });
                 if (event.clientY > nodeRect.top + nodeRect.height / 2) {
                     targetElement.classList.add("dragover__bottom");
                 } else {
@@ -467,10 +468,18 @@ export const openMenuPanel = (options: {
             }
             dragoverElement = targetElement;
         });
+        let counter = 0
         avPanelElement.addEventListener("dragleave", () => {
+            counter--;
+            if (counter === 0) {
                 avPanelElement.querySelectorAll(".dragover__bottom, .dragover__top").forEach((item: HTMLElement) => {
                     item.classList.remove("dragover__bottom", "dragover__top");
                 });
+            }
+        });
+        avPanelElement.addEventListener("dragenter", (event) => {
+            event.preventDefault();
+            counter++;
         });
         avPanelElement.addEventListener("dragend", () => {
             if (window.siyuan.dragElement) {

app/src/protyle/util/editorCommonEvent.ts

@@ -4,7 +4,8 @@ import {
     hasClosestByAttribute,
     hasClosestByClassName,
     hasClosestByTag,
-    hasTopClosestByAttribute, isInEmbedBlock
+    hasTopClosestByAttribute,
+    isInEmbedBlock
 } from "./hasClosest";
 import {Constants} from "../../constants";
 import {paste} from "./paste";
@@ -1371,15 +1372,23 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
             dragoverElement = targetElement;
         }
     });
-    editorElement.addEventListener("dragleave", (event) => {
+    let counter = 0
+    editorElement.addEventListener("dragleave", (event: DragEvent & { target: HTMLElement }) => {
         if (protyle.disabled) {
             event.preventDefault();
             event.stopPropagation();
             return;
         }
+        counter--;
+        if (counter === 0) {
             editorElement.querySelectorAll(".dragover__left, .dragover__right, .dragover__bottom, .dragover__top, .dragover").forEach((item: HTMLElement) => {
                 item.classList.remove("dragover__top", "dragover__bottom", "dragover__left", "dragover__right", "dragover");
             });
+        }
+    });
+    editorElement.addEventListener("dragenter", (event) => {
+        event.preventDefault();
+        counter++;
     });
 };