Improve the ghosting of list items fix #11920 (#13821)

* style: 去除 ghost 元素的高亮 * fix(drag): 改进列表项拖影 * fix(drag): 改进列表项拖影 * clean code
siyuan-note · Jan 29, 2025 · c93dc58 · c93dc58
1 parent 332f859
commit c93dc58
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
@@ -385,5 +385,12 @@ html {
   }
 }
 
+.dragghost [data-node-id] {
+  &.protyle-wysiwyg--select::after,
+  &.protyle-wysiwyg--hl::after {
+    display: none;
+  }
+}
+
 // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
 @import "util/responsive";
diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts
@@ -127,10 +127,10 @@ export class Gutter {
             }
 
             const ghostElement = document.createElement("div");
-            ghostElement.className = protyle.wysiwyg.element.className;
+            ghostElement.className = protyle.wysiwyg.element.className + " dragghost";
             selectElements.forEach(item => {
-                const type = item.getAttribute("data-type");
                 if (item.querySelector("iframe")) {
+                    const type = item.getAttribute("data-type");
                     const embedElement = genEmptyElement();
                     embedElement.classList.add("protyle-wysiwyg--select");
                     getContenteditableElement(embedElement).innerHTML = `<svg class="svg"><use xlink:href="${buttonElement.querySelector("use").getAttribute("xlink:href")}"></use></svg> ${getLangByType(type)}`;
@@ -141,7 +141,12 @@ export class Gutter {
             });
             ghostElement.setAttribute("style", `position:fixed;opacity:.1;width:${selectElements[0].clientWidth}px;padding:0;`);
             document.body.append(ghostElement);
-            event.dataTransfer.setDragImage(ghostElement, 0, 0);
+            if (selectElements[0].classList.contains("li")) {
+                const actionElement = selectElements[0].querySelector(".protyle-action");
+                event.dataTransfer.setDragImage(ghostElement, actionElement.clientWidth / 2, actionElement.clientHeight / 2);
+            } else {
+                event.dataTransfer.setDragImage(ghostElement, 0, 0);
+            }
             setTimeout(() => {
                 ghostElement.remove();
             });

diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts
@@ -32,6 +32,7 @@ import {zoomOut} from "../../menus/protyle";
 import {webUtils} from "electron";
 /// #endif
 import {addDragFill} from "../render/av/cell";
+import {processClonePHElement} from "../render/util";
 
 const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
                    isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
@@ -816,6 +817,16 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 window.siyuan.dragElement = undefined;
                 event.preventDefault();
             } else if (target.classList.contains("protyle-action")) {
+                const ghostElement = document.createElement("div");
+                ghostElement.className = protyle.wysiwyg.element.className + " dragghost";
+                ghostElement.append(processClonePHElement(target.parentElement.cloneNode(true) as Element));
+                ghostElement.setAttribute("style", `position:fixed;opacity:.1;width:${target.parentElement.clientWidth}px;padding:0;`);
+                document.body.append(ghostElement);
+                event.dataTransfer.setDragImage(ghostElement, target.clientWidth / 2, target.clientHeight / 2);
+                setTimeout(() => {
+                    ghostElement.remove();
+                });
+
                 window.siyuan.dragElement = protyle.wysiwyg.element;
                 event.dataTransfer.setData(`${Constants.SIYUAN_DROP_GUTTER}NodeListItem${Constants.ZWSP}${target.parentElement.getAttribute("data-subtype")}${Constants.ZWSP}${[target.parentElement.getAttribute("data-node-id")]}`,
                     protyle.wysiwyg.element.innerHTML);