feat: JS 实现客户端拖动动画样式

ArgoZhang · ArgoZhang · commit b4e0183ce57e · 2025-07-10T14:44:37.000+08:00
diff --git a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
@@ -5,7 +5,7 @@
 <h3>@Localizer["TreeViewsTitle"]</h3>
 <h4>@Localizer["TreeViewsDescription"]</h4>
 
-<Tips class="mt-3">
+@* <Tips class="mt-3">
     <div class="mb-3"><code>Tree</code> @((MarkupString)Localizer["TreeViewsTips1"].Value) <code>TItem="TreeFoo"</code></div>
     <ul class="ul-demo mb-0">
         <li>@((MarkupString)Localizer["TreeViewsTips2"].Value)</li>
@@ -50,18 +50,17 @@
     </section>
     <TreeView Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent"></TreeView>
     <ConsoleLogger @ref="Logger2"></ConsoleLogger>
-</DemoBlock>
+</DemoBlock> *@
 
 <DemoBlock Title="@Localizer["TreeViewDraggableTitle"]"
            Introduction="@Localizer["TreeViewDraggableIntro"]"
            Name="TreeDraggable">
     <section ignore>@((MarkupString)Localizer["TreeViewDraggableDescription"].Value)</section>
-    <TreeView Items="@DraggableItems" OnTreeItemClick="@OnTreeItemClick" ShowToolbar="true"
-              AllowDrag="true" OnDragItemEndAsync="OnDragItemEndAsync">
+    <TreeView Items="@DraggableItems" AllowDrag="true" OnDragItemEndAsync="OnDragItemEndAsync">
     </TreeView>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TreeViewTreeDisableTitle"]"
+@* <DemoBlock Title="@Localizer["TreeViewTreeDisableTitle"]"
            Introduction="@Localizer["TreeViewTreeDisableIntro"]"
            Name="TreeDisable">
     <section ignore>@((MarkupString)Localizer["TreeViewTreeDisableDescription"].Value)</section>
@@ -218,4 +217,4 @@
 
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
-<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>
+<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable> *@
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
@@ -390,7 +390,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new { Invoke = Interop, Method = nameof(TriggerKeyDown) });
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new
+    {
+        Invoke = Interop,
+        Method = nameof(TriggerKeyDown),
+        AllowDrag
+    });
 
     private bool _keyboardArrowUpDownTrigger;
 
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.js
@@ -1,12 +1,13 @@
 ﻿import EventHandler from "../../modules/event-handler.js"
+import { insertBefore } from "../../modules/utility.js"
 
 export function init(id, options) {
     const el = document.getElementById(id)
     if (el === null) {
         return
     }
 
-    const { invoke, method } = options
+    const { invoke, method, allowDrag } = options
     EventHandler.on(el, 'keydown', '.tree-root', e => {
         if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
             const v = el.getAttribute('data-bb-keyboard');
@@ -26,6 +27,115 @@ export function init(id, options) {
             }
         }
     });
+
+    if (allowDrag) {
+        resetTreeViewRow(el);
+
+        EventHandler.on(el, 'dragstart', e => {
+            console.log(e.target);
+            el.targetItem = e.target;
+            el.targetItem.classList.add('drag-item');
+            e.dataTransfer.setData('text/plain', '');
+            e.dataTransfer.effectAllowed = 'move';
+            el.classList.add('dragging');
+            console.log('Drag start event triggered');
+        });
+
+        EventHandler.on(el, 'dragend', e => {
+            el.classList.remove('dragging');
+            el.targetItem.classList.remove('drag-item');
+            const overItem = el.querySelector('.tree-drag-inside-over');
+            if (overItem) {
+                overItem.classList.remove('tree-drag-inside-over');
+            }
+            const belowItem = el.querySelector('.tree-node-placeholder');
+            if (belowItem) {
+                belowItem.remove();
+            }
+            delete el.targetItem;
+            console.log('Drag end event triggered');
+        });
+
+        EventHandler.on(el, 'dragenter', '.tree-drop-child-inside', e => {
+            e.preventDefault();
+
+            const item = e.delegateTarget;
+            item.classList.add('tree-drag-inside-over');
+            console.log('inside Drag enter event triggered');
+        });
+        EventHandler.on(el, 'dragenter', '.tree-drop-child-below', e => {
+            e.preventDefault()
+
+            const item = e.delegateTarget;
+            const placeholder = createPlaceholder();
+            item.appendChild(placeholder);
+            console.log('below Drag enter event triggered');
+        });
+
+        EventHandler.on(el, 'dragleave', '.tree-drop-child-inside', e => {
+            e.preventDefault()
+
+            const item = e.delegateTarget;
+            item.classList.remove('tree-drag-inside-over');
+            console.log('inside Drag leave event triggered');
+        });
+        EventHandler.on(el, 'dragleave', '.tree-drop-child-below', e => {
+            e.preventDefault()
+
+            const item = e.delegateTarget;
+            item.classList.remove('tree-drag-below-over');
+            item.innerHTML = "";
+            console.log('below Drag leave event triggered');
+        });
+
+        EventHandler.on(el, 'dragover', '.tree-drop-zone', e => {
+            e.preventDefault()
+        });
+    }
+}
+
+const resetTreeViewRow = el => {
+    const rows = [...el.querySelectorAll('.tree-content')];
+    rows.forEach(row => {
+        const node = row.querySelector('.tree-node');
+        if (node) {
+            node.setAttribute('draggable', 'true');
+            const dropzone = createDropzone();
+            insertBefore(node, dropzone);
+        }
+    });
+}
+
+const createDropzone = () => {
+    const div = document.createElement('div');
+    div.classList.add(`tree-drop-zone`);
+
+    const inside = document.createElement('div');
+    inside.classList.add(`tree-drop-child-inside`);
+
+    const below = document.createElement('div');
+    below.classList.add(`tree-drop-child-below`);
+
+    div.appendChild(inside);
+    div.appendChild(below);
+
+    return div
+}
+
+const createPlaceholder = () => {
+    const div = document.createElement('div');
+    div.classList.add(`tree-node-placeholder`);
+
+    const circle = document.createElement('div');
+    circle.classList.add(`tree-node-ph-circle`);
+
+    const line = document.createElement('div');
+    line.classList.add(`tree-node-ph-line`);
+
+    div.appendChild(circle);
+    div.appendChild(line);
+
+    return div
 }
 
 export function scroll(id, options) {
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
@@ -175,99 +175,55 @@
 
     .tree-drop-zone {
         position: absolute;
-        top: 4px;
-        left: 18px;
+        top: 0px;
+        left: 0;
         right: 0;
-        bottom: -5px;
+        bottom: -6px;
         background-color: transparent;
         display: grid;
-        grid-template-rows: 1fr 8px;
-        background-color: #f2747440;
-        pointer-events: all;
+        grid-template-rows: 1fr 5px;
 
         .tree-drop-child-inside {
             grid-row: 1 / 2;
-            background-color: #aad4ff;
 
-            &.tree-drag-over {
-                border: solid 1px var(--bb-tree-drop-preview-color);
+            &.tree-drag-inside-over {
+                border: solid 2px var(--bb-tree-drop-preview-color);
                 border-radius: var(--bs-border-radius);
             }
         }
 
         .tree-drop-child-below {
             grid-row: 2 / 3;
-            background-color: #f2747440;
-        }
-    }
-
-    .tree-preview-child-last {
-        position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
-        border: 2px solid var(--bb-tree-drop-preview-color);
-        border-radius: 6px;
-        pointer-events: none;
-        z-index: 1;
-        background: transparent;
-    }
-
-    .tree-preview-child-first {
-        position: absolute;
-        bottom: -4px;
-        height: 8px;
-        left: 20px;
-        right: 0;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        pointer-events: none;
-
-        .tree-preview-circle {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: var(--bb-tree-drop-preview-color);
-        }
-
-        .tree-preview-line {
-            flex: 1;
-            height: 2px;
-            background-color: var(--bb-tree-drop-preview-color);
-        }
-    }
-
-    .tree-preview-below {
-        position: absolute;
-        bottom: -4px;
-        height: 8px;
-        left: 0;
-        right: 0;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        pointer-events: none;
+            z-index: 2;
 
-        .tree-preview-circle {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: var(--bb-tree-drop-preview-color);
-        }
+            .tree-node-placeholder {
+                position: absolute;
+                bottom: 0px;
+                left: 18px;
+                right: 0;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                pointer-events: none;
+
+                .tree-node-ph-circle {
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 50%;
+                    background-color: var(--bb-tree-drop-preview-color);
+                }
 
-        .tree-preview-line {
-            flex: 1;
-            height: 2px;
-            background-color: var(--bb-tree-drop-preview-color);
+                .tree-node-ph-line {
+                    flex: 1;
+                    min-width: 0px;
+                    width: 1%;
+                    height: 2px;
+                    background-color: var(--bb-tree-drop-preview-color);
+                }
+            }
         }
     }
 
-    .tree-drop-pass {
-        pointer-events: none;
-    }
-
     &.dragging {
         .tree-node:not(.drag-item) {
             pointer-events: none;
@@ -280,32 +236,5 @@
             opacity: 0.5;
             background-color: #d4edff;
         }
-
-        .tree-node-placeholder {
-            position: absolute;
-            bottom: -4px;
-            height: 8px;
-            left: 0;
-            right: 0;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            pointer-events: none;
-
-            .tree-node-ph-circle {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background-color: var(--bb-tree-drop-preview-color);
-            }
-
-            .tree-node-ph-line {
-                flex: 1;
-                min-width: 0px;
-                width: 1%;
-                height: 2px;
-                background-color: var(--bb-tree-drop-preview-color);
-            }
-        }
     }
 }
