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

app/src/assets/scss/base.scss

@@ -17,7 +17,6 @@
 @import "business/graph";
 @import "business/layout";
 @import "business/block";
-@import "business/drag";
 @import "util/reset";
 @import "component/card";
 @import "component/menu";
@@ -324,39 +323,6 @@ html {
     overflow: hidden;
     transition: var(--b3-transition);
   }
-
-  &.sy__outline,
-  &.sy__file {
-    .dragover::after {
-      width: calc(100% - var(--file-toggle-width));
-      left: var(--file-toggle-width);
-    }
-
-    .dragover__top,
-    .dragover__bottom {
-      box-shadow: none !important;
-    }
-
-    .dragover__top::after,
-    .dragover__bottom::after {
-      content: "";
-      position: absolute;
-      height: 4px;
-      width: calc(100% - var(--file-toggle-width));
-      left: var(--file-toggle-width);
-      background-color: var(--b3-theme-primary-lighter);
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .dragover__top::after {
-      top: -3px;
-    }
-
-    .dragover__bottom::after {
-      bottom: -2px;
-    }
-  }
 }
 
 .counter {

app/src/assets/scss/business/_av.scss

@@ -126,11 +126,6 @@
     position: relative;
     font-size: 87.5%;
 
-    &.dragover__top,
-    &.dragover__bottom {
-      box-shadow: none !important;
-    }
-
     &.dragover__top::after,
     &.dragover__bottom::after {
       content: '';
@@ -316,13 +311,23 @@
       display: none;
     }
 
-    &.dragover__right {
+    &.dragover__left::after,
-      border-right-color: var(--b3-theme-primary-lighter);
+    &.dragover__right::after {
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      content: '';
+      position: absolute;
+      background-color: var(--b3-theme-primary-lighter);
+      z-index: 3;
     }
 
-    &.dragover__left,
+    &.dragover__left::after {
-    &.dragover__right {
+      left: -2.5px;
-      z-index: 2;
+    }
+
+    &.dragover__right::after {
+      right: -2.5px;
     }
 
     &--select {
@@ -552,11 +557,6 @@
           cursor: not-allowed;
         }
 
-        &.dragover__bottom,
-        &.dragover__top {
-          box-shadow: none !important;
-        }
-
         &.dragover__top::after,
         &.dragover__bottom::after {
           content: '';

app/src/assets/scss/business/_drag.scss

@@ -1,35 +0,0 @@
-.dragover {
-
-  &::after {
-    background-color: var(--b3-theme-primary-lightest);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    content: " ";
-    left: 0;
-    top: 0;
-    z-index: 3;
-    pointer-events: none;
-  }
-
-  // 需要 !important，否则拖拽到闪卡无效果
-  &__top {
-    border-radius: 0 !important;
-    box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0 1px 0 var(--b3-theme-primary-lighter) !important;
-  }
-
-  &__bottom {
-    border-radius: 0 !important;
-    box-shadow: 0 2px 0 var(--b3-theme-primary-lighter), inset 0 -2px 0 var(--b3-theme-primary-lighter) !important;
-  }
-
-  &__left {
-    border-radius: 0 !important;
-    box-shadow: -3px 0 0 var(--b3-theme-primary-lighter), inset 1px 0 0 var(--b3-theme-primary-lighter) !important;
-  }
-
-  &__right {
-    border-radius: 0 !important;
-    box-shadow: 1px 0 0 var(--b3-theme-primary-lighter), inset -2px 0 0 var(--b3-theme-primary-lighter) !important;
-  }
-}

app/src/assets/scss/component/_list.scss

@@ -7,10 +7,42 @@
   &--background .b3-list-item {
     border-radius: var(--b3-border-radius);
 
-    &:hover:not(.b3-list-item--focus):not(.dragover):not(.dragover__top):not(.dragover__bottom),
+    &:hover:not(.b3-list-item--focus):not(.dragover):not(.dragover__current):not(.dragover__top):not(.dragover__bottom),
-    &--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
+    &--focus {
       background-color: var(--b3-list-hover);
     }
+
+    &.dragover::after {
+      background-color: var(--b3-theme-primary-lightest);
+      position: absolute;
+      height: 100%;
+      content: " ";
+      top: 0;
+      z-index: 3;
+      pointer-events: none;
+      width: calc(100% - var(--file-toggle-width));
+      left: var(--file-toggle-width);
+    }
+
+    &.dragover__top::after,
+    &.dragover__bottom::after {
+      content: "";
+      position: absolute;
+      height: 4px;
+      width: calc(100% - var(--file-toggle-width));
+      left: var(--file-toggle-width);
+      background-color: var(--b3-theme-primary-lighter);
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    &.dragover__top::after {
+      top: -3px;
+    }
+
+    &.dragover__bottom::after {
+      bottom: -2px;
+    }
   }
 
   &--empty {

app/src/assets/scss/mobile.scss

@@ -14,7 +14,6 @@
 @import "business/graph";
 @import "business/layout";
 @import "business/block";
-@import "business/drag";
 @import "util/reset";
 @import "util/function";
 @import "business/history";

app/src/assets/scss/protyle/_wysiwyg.scss

@@ -21,6 +21,47 @@
   [data-node-id] {
     position: relative;
 
+    &.dragover {
+      &__left::after,
+      &__right::after,
+      &__top::after,
+      &__bottom::after {
+        content: '';
+        position: absolute;
+        background-color: var(--b3-theme-primary-lighter);
+      }
+
+      &__top::after,
+      &__bottom::after {
+        left: 0;
+        right: 0;
+        height: 4px;
+      }
+
+      &__top::after {
+        top: -4px;
+      }
+
+      &__bottom::after {
+        bottom: -4px;
+      }
+
+      &__left::after,
+      &__right::after {
+        top: 0;
+        bottom: 0;
+        width: 4px;
+      }
+
+      &__left::after {
+        left: -4px;
+      }
+
+      &__right::after {
+        right: -4px;
+      }
+    }
+
     &[custom-riff-decks] {
       box-shadow: 2px 0 0 0 var(--b3-protyle-inline-mark-background) inset;
     }
@@ -445,13 +486,18 @@
     }
   }
 
-  &--select,
+  &--select::after,
-  &--hl {
+  &--hl::after {
-    @extend .dragover;
+    background-color: var(--b3-theme-primary-lightest);
-
+    position: absolute;
-    &::after {
+    width: 100%;
-      border-radius: var(--b3-border-radius);
+    height: 100%;
-    }
+    content: " ";
+    left: 0;
+    top: 0;
+    z-index: 3;
+    pointer-events: none;
+    border-radius: var(--b3-border-radius);
   }
 
   &--hl {
@@ -463,16 +509,6 @@
     display: none;
   }
 
-  .dragover {
-    &__top {
-      box-shadow: 0 -4px 0 0 var(--b3-theme-primary-lighter) !important;
-    }
-
-    &__bottom {
-      box-shadow: 0 4px 0 0 var(--b3-theme-primary-lighter) !important
-    }
-  }
-
   &--attr .protyle-attr {
     opacity: 1;
 

app/src/assets/scss/util/_reset.scss

@@ -42,7 +42,7 @@ body {
       }
 
       &__tab--active {
-        .b3-list--background .b3-list-item--focus:not(.dragover) {
+        .b3-list--background .b3-list-item--focus {
           background-color: var(--b3-list-hover);
         }
 

app/src/boot/globalEvent/click.ts

@@ -22,8 +22,8 @@ export const globalClick = (event: MouseEvent & { target: HTMLElement }) => {
             if (startElement) {
                 startElement.style.opacity = "";
             }
-            ghostElement.parentElement.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach((item: HTMLElement) => {
+            ghostElement.parentElement.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach((item: HTMLElement) => {
-                item.classList.remove("dragover__top", "dragover__bottom", "dragover");
+                item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current");
                 item.style.opacity = "";
             });
         }

app/src/layout/dock/Outline.ts

@@ -232,6 +232,7 @@ export class Outline extends Model {
                     return true;
                 }
             });
+            const contentRect = this.element.getBoundingClientRect();
             documentSelf.onmousemove = (moveEvent: MouseEvent) => {
                 if (!editor || editor.disabled || Math.abs(moveEvent.clientY - event.clientY) < 3 &&
                     Math.abs(moveEvent.clientX - event.clientX) < 3) {
@@ -249,13 +250,29 @@ export class Outline extends Model {
                 }
                 ghostElement.style.top = moveEvent.clientY + "px";
                 ghostElement.style.left = moveEvent.clientX + "px";
-                selectItem = hasClosestByClassName(moveEvent.target as HTMLElement, "b3-list-item") as HTMLElement;
+                if (!this.element.contains(moveEvent.target as Element)) {
-                if (!selectItem || selectItem.tagName !== "LI" || selectItem.isSameNode(item) || selectItem.style.position === "fixed" || !this.element.contains(selectItem)) {
+                    this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach(item => {
+                        item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current");
+                    });
                     return;
                 }
-                this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach(item => {
+                if (moveEvent.clientY < contentRect.top + Constants.SIZE_SCROLL_TB || moveEvent.clientY > contentRect.bottom - Constants.SIZE_SCROLL_TB) {
-                    item.classList.remove("dragover__top", "dragover__bottom", "dragover");
+                    this.element.scroll({
+                        top: this.element.scrollTop + (moveEvent.clientY < contentRect.top + Constants.SIZE_SCROLL_TB ? -Constants.SIZE_SCROLL_STEP : Constants.SIZE_SCROLL_STEP),
+                        behavior: "smooth"
+                    });
+                }
+                selectItem = hasClosestByClassName(moveEvent.target as HTMLElement, "b3-list-item") as HTMLElement;
+                if (!selectItem || selectItem.tagName !== "LI" || selectItem.style.position === "fixed") {
+                    return;
+                }
+                this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach(item => {
+                    item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current");
                 });
+                if (selectItem.isSameNode(item)) {
+                    selectItem.classList.add("dragover__current");
+                    return;
+                }
                 const selectRect = selectItem.getBoundingClientRect();
                 if (moveEvent.clientY > selectRect.bottom - 10) {
                     selectItem.classList.add("dragover__bottom");
@@ -278,7 +295,8 @@ export class Outline extends Model {
                     selectItem = this.element.querySelector(".dragover__top, .dragover__bottom, .dragover");
                 }
                 let hasChange = true;
-                if (selectItem && selectItem.className.indexOf("dragover") > -1 && editor) {
+                if (selectItem && editor &&
+                    (selectItem.classList.contains("dragover__top") || selectItem.classList.contains("dragover__bottom") || selectItem.classList.contains("dragover"))) {
                     let previousID;
                     let parentID;
                     const undoPreviousID = (item.previousElementSibling && item.previousElementSibling.tagName === "UL") ? item.previousElementSibling.previousElementSibling.getAttribute("data-node-id") : item.previousElementSibling?.getAttribute("data-node-id");
@@ -331,8 +349,8 @@ export class Outline extends Model {
                         return true;
                     }
                 }
-                this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover").forEach(item => {
+                this.element.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach(item => {
-                    item.classList.remove("dragover__top", "dragover__bottom", "dragover");
+                    item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current");
                 });
             };
         });