From 655d7cd41b0dac185d20dcc7641139a8e0d4a928 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 2 Apr 2024 23:50:22 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10828

---
 app/src/layout/dock/Outline.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/src/layout/dock/Outline.ts b/app/src/layout/dock/Outline.ts
index 771b5d092..05a330d74 100644
--- a/app/src/layout/dock/Outline.ts
+++ b/app/src/layout/dock/Outline.ts
@@ -233,15 +233,8 @@ export class Outline extends Model {
                 return;
             }
             const documentSelf = document;
-            item.style.opacity = "0.38";
-            const ghostElement = item.cloneNode(true) as HTMLElement;
-            this.element.append(ghostElement);
-            ghostElement.setAttribute("id", "dragGhost");
-            ghostElement.firstElementChild.setAttribute("style", "padding-left:4px");
-            ghostElement.setAttribute("style", `border-radius: var(--b3-border-radius);background-color: var(--b3-list-hover);position: fixed; top: ${event.clientY}px; left: ${event.clientX}px; z-index:999997;`);
-
             documentSelf.ondragstart = () => false;
-
+            let ghostElement: HTMLElement
             let selectItem: HTMLElement;
             documentSelf.onmousemove = (moveEvent: MouseEvent) => {
                 if (moveEvent.clientY === event.clientY && moveEvent.clientX === event.clientX) {
@@ -249,6 +242,14 @@ export class Outline extends Model {
                 }
                 moveEvent.preventDefault();
                 moveEvent.stopPropagation();
+                if (!ghostElement) {
+                    item.style.opacity = "0.38";
+                    ghostElement = item.cloneNode(true) as HTMLElement;
+                    this.element.append(ghostElement);
+                    ghostElement.setAttribute("id", "dragGhost");
+                    ghostElement.firstElementChild.setAttribute("style", "padding-left:4px");
+                    ghostElement.setAttribute("style", `border-radius: var(--b3-border-radius);background-color: var(--b3-list-hover);position: fixed; top: ${event.clientY}px; left: ${event.clientX}px; z-index:999997;`);
+                }
                 ghostElement.style.top = moveEvent.clientY + "px";
                 ghostElement.style.left = moveEvent.clientX + "px";
                 selectItem = hasClosestByClassName(moveEvent.target as HTMLElement, "b3-list-item") as HTMLElement;