Enhance TreeView drag-and-drop and add comprehensive tests

syminomega · syminomega · commit 3c8f5a153f15 · 2025-07-08T18:40:32.000+08:00
Improved TreeView drag-and-drop logic to handle moving nodes without parents and updated node removal accordingly. Added and expanded unit tests to cover moving nodes as last child, first child, and as siblings below, ensuring correct parent/child relationships and node ordering. Also added clarifying comments in TreeViewRow for drag-and-drop preview UI.
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
@@ -773,7 +773,16 @@ private async Task OnItemDrop(TreeDropEventArgs<TItem> e)
             }
 
             // 如果允许改变源节点则更新拖拽项的父对象以及排序
-            _draggingItem.Parent?.Items.Remove(_draggingItem);
+            if (_draggingItem.Parent is not null)
+            {
+                _draggingItem.Parent.Items.Remove(_draggingItem);
+            }
+            else
+            {
+                // 没有父对象，则从顶层节点集合中移除
+                Items.Remove(_draggingItem);
+            }
+
             _draggingItem.IsExpand = e.ExpandAfterDrop;
 
             switch (e.DropType)
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeViewRow.razor b/src/BootstrapBlazor/Components/TreeView/TreeViewRow.razor
@@ -62,17 +62,20 @@
                 }
             }
 
+            @* 鼠标拖到节点中央，表示放置到当前节点内部作为最后一个子节点，显示边框预览 *@
             @if (_previewChildLast)
             {
                 <div class="tree-preview-child-last"></div>
             }
+            @* 展开状态下，拖到当前节点靠下的位置，插入到内部作为第一个子节点，显示线条预览 *@
             @if (_previewChildFirst)
             {
                 <div class="tree-preview-child-first">
                     <div class="tree-preview-circle"></div>
                     <div class="tree-preview-line"></div>
                 </div>
             }
+            @* 折叠状态或者没有子节点，拖到当前节点靠下的位置，作为同级节点，显示线条预览 *@
             @if (_previewBelow)
             {
                 <div class="tree-preview-below">
diff --git a/src/BootstrapBlazor/Enums/TreeDropType.cs b/src/BootstrapBlazor/Enums/TreeDropType.cs
@@ -19,7 +19,7 @@ public enum TreeDropType
     /// </summary>
     AsLastChild,
     /// <summary>
-    /// 作为同级节点
+    /// 作为下方同级节点
     /// </summary>
     AsSiblingBelow,
 }
diff --git a/test/UnitTest/Components/TreeViewTest.cs b/test/UnitTest/Components/TreeViewTest.cs
@@ -1223,13 +1223,15 @@ public async Task ShowToolbar_Ok()
         Assert.Contains("test-toolbar-template", cut.Markup);
     }
 
+    #region DraggableTest
+
     [Fact]
     public async Task Draggable_Basic_MoveAsLastChild()
     {
         // Arrange
         var items = new List<TreeFoo>
         {
-            new() { Text = "Root", Id = "1" },
+            new() { Text = "Root1", Id = "1" },
             new() { Text = "Child1", Id = "2", ParentId = "1" },
             new() { Text = "Child2", Id = "3", ParentId = "1" },
             new() { Text = "Root2", Id = "4" },
@@ -1245,37 +1247,39 @@ public async Task Draggable_Basic_MoveAsLastChild()
 
         var rows = cut.FindComponents<TreeViewRow<TreeFoo>>();
         var dragSource = rows[1]; // Child1
-        var dragTarget = rows[3]; // Root2
+        var dropTarget = rows[3]; // Root2
 
-        var dragSourceElement = dragSource.Find(".tree-node");
-        var dragTargetDropZone = dragTarget.Find(".tree-drop-child-inside");
-        // 1. 触发 dragstart
-        await dragSourceElement.TriggerEventAsync("ondragstart", new DragEventArgs());
-        // 2. 触发 dragenter 到目标 drop zone
-        await dragTargetDropZone.TriggerEventAsync("ondragenter", new DragEventArgs());
-        // 3. 触发 drop 到目标 drop zone
-        await dragTargetDropZone.TriggerEventAsync("ondrop", new DragEventArgs());
-        // 成功移动，原对象销毁，不触发dragend
+        var sourceElement = dragSource.Find(".tree-node");
+        // 拖动到节点中间的区域
+        var targetDropZone = dropTarget.Find(".tree-drop-child-inside");
+
+        await sourceElement.TriggerEventAsync("ondragstart", new DragEventArgs());
+        await targetDropZone.TriggerEventAsync("ondragenter", new DragEventArgs());
+        await targetDropZone.TriggerEventAsync("ondrop", new DragEventArgs());
 
         // Assert
-        Assert.Equal("Root2", nodes[1].Text);
-        Assert.Equal(2, nodes[1].Items.Count);
-        Assert.Equal("Child1", nodes[1].Items[1].Text);
-        Assert.Equal(nodes[1], nodes[1].Items[1].Parent);
+        Assert.Single(nodes[0].Items); // Root1 只剩下 Child2
+        Assert.Equal(2, nodes[1].Items.Count); // Root2 有 Child3 和 Child1
+        Assert.Equal("Child1", nodes[1].Items[1].Text); // Child1 成为 Root2 的最后一个子节点
+        Assert.Equal(nodes[1], nodes[1].Items[1].Parent); // Child1 的父节点是 Root2
     }
 
     [Fact]
-    public async Task Draggable_Basic_MoveAsSiblingBelow()
+    public async Task Draggable_Basic_MoveAsFirstChild()
     {
         // Arrange
         var items = new List<TreeFoo>
         {
-            new() { Text = "Root", Id = "1" },
+            new() { Text = "Root1", Id = "1" },
             new() { Text = "Child1", Id = "2", ParentId = "1" },
-            new() { Text = "Child2", Id = "3", ParentId = "1" }
+            new() { Text = "Child2", Id = "3", ParentId = "1" },
+            new() { Text = "Root2", Id = "4" },
+            new() { Text = "Child3", Id = "5", ParentId = "4" }
         };
         var nodes = TreeFoo.CascadingTree(items);
         nodes[0].IsExpand = true;
+        // 展开情况才能作为第一个子节点进行拖入
+        nodes[1].IsExpand = true;
         var cut = Context.RenderComponent<TreeView<TreeFoo>>(pb =>
         {
             pb.Add(a => a.Items, nodes);
@@ -1284,24 +1288,106 @@ public async Task Draggable_Basic_MoveAsSiblingBelow()
 
         var rows = cut.FindComponents<TreeViewRow<TreeFoo>>();
         var dragSource = rows[1]; // Child1
-        var dragTarget = rows[2]; // Child2
+        var dragTarget = rows[3]; // Root2
 
-        // 获取可拖拽的 DOM 元素（DynamicElement）
-        var dragSourceElement = dragSource.Find(".tree-node");
-        var dragTargetDropZone = dragTarget.Find(".tree-drop-child-below");
-        // 1. 触发 dragstart
-        await dragSourceElement.TriggerEventAsync("ondragstart", new DragEventArgs());
-        // 2. 触发 dragenter 到目标 drop zone
-        await dragTargetDropZone.TriggerEventAsync("ondragenter", new DragEventArgs());
-        // 3. 触发 drop 到目标 drop zone
-        await dragTargetDropZone.TriggerEventAsync("ondrop", new DragEventArgs());
-        // 成功移动，原对象销毁，不触发dragend
+        var sourceElement = dragSource.Find(".tree-node");
+        // 拖动到节点靠下的区域
+        var targetDropZone = dragTarget.Find(".tree-drop-child-below");
+
+        await sourceElement.TriggerEventAsync("ondragstart", new DragEventArgs());
+        await targetDropZone.TriggerEventAsync("ondragenter", new DragEventArgs());
+        await targetDropZone.TriggerEventAsync("ondrop", new DragEventArgs());
 
         // Assert
-        var parent = nodes[0];
-        Assert.Equal(2, parent.Items.Count);
-        Assert.Equal("Child2", parent.Items[0].Text);
-        Assert.Equal("Child1", parent.Items[1].Text);
+        Assert.Single(nodes[0].Items); // Root1 只剩下 Child2
+        Assert.Equal(2, nodes[1].Items.Count); // Root2 有 Child1 和 Child3
+        Assert.Equal("Child1", nodes[1].Items[0].Text); // Child1 成为 Root2 的第一个子节点
+        Assert.Equal(nodes[1], nodes[1].Items[0].Parent); // Child1 的父节点是 Root2
+    }
+
+    [Fact]
+    public async Task Draggable_Basic_MoveAsSiblingBelow()
+    {
+        // Arrange
+        var items = new List<TreeFoo>
+        {
+            new() { Text = "Root1", Id = "1" },
+            new() { Text = "Child1", Id = "2", ParentId = "1" },
+            new() { Text = "Child2", Id = "3", ParentId = "1" },
+            new() { Text = "Root2", Id = "4" },
+            new() { Text = "Child3", Id = "5", ParentId = "4" },
+            new() { Text = "Child4", Id = "6", ParentId = "4" },
+            new() { Text = "Root3", Id = "7" }
+        };
+        var nodes = TreeFoo.CascadingTree(items);
+        nodes[0].IsExpand = true;
+        nodes[1].IsExpand = true;
+        var cut = Context.RenderComponent<TreeView<TreeFoo>>(pb =>
+        {
+            pb.Add(a => a.Items, nodes);
+            pb.Add(a => a.ItemDraggable, true);
+        });
+
+        var rowsA = cut.FindComponents<TreeViewRow<TreeFoo>>();
+        var source1 = rowsA[1]; // Child1
+        var target1 = rowsA[4]; // Child3
+
+        var drag1 = source1.Find(".tree-node");
+        // 拖动到 Child3 的下方，非最后一个兄弟节点
+        var drop1 = target1.Find(".tree-drop-child-below");
+
+        await drag1.TriggerEventAsync("ondragstart", new DragEventArgs());
+        await drop1.TriggerEventAsync("ondragenter", new DragEventArgs());
+        await drop1.TriggerEventAsync("ondrop", new DragEventArgs());
+
+        // Assert
+        Assert.Single(nodes[0].Items); // Root1 只剩下 Child2
+        Assert.Equal(3, nodes[1].Items.Count); // Root2 有 Child3, Child1 和 Child4
+        Assert.Equal("Child3", nodes[1].Items[0].Text);
+        Assert.Equal("Child1", nodes[1].Items[1].Text); // Child1 成为 Child3 的下一个兄弟节点
+
+        // 渲染变更后的内容
+        cut.Render();
+
+        var rowsB = cut.FindComponents<TreeViewRow<TreeFoo>>();
+        var source2 = rowsB[1]; // Child2
+        var target2 = rowsB[5]; // Child4
+
+        var drag2 = source2.Find(".tree-node");
+        // 拖动到 Child4 的下方，成为最后一个兄弟节点
+        var drop2 = target2.Find(".tree-drop-child-below");
+
+        await drag2.TriggerEventAsync("ondragstart", new DragEventArgs());
+        await drop2.TriggerEventAsync("ondragenter", new DragEventArgs());
+        await drop2.TriggerEventAsync("ondrop", new DragEventArgs());
+
+        // Assert
+        Assert.Empty(nodes[0].Items); // Root1 没有对象
+        Assert.Equal(4, nodes[1].Items.Count); // Root2 有 Child3, Child1, Child4 和 Child2
+        Assert.Equal("Child3", nodes[1].Items[0].Text);
+        Assert.Equal("Child1", nodes[1].Items[1].Text); // Child1 仍然是 Child3 的下一个兄弟节点
+        Assert.Equal("Child4", nodes[1].Items[2].Text); // Child4 仍然是 Child1 的下一个兄弟节点
+        Assert.Equal("Child2", nodes[1].Items[3].Text); // Child2 成为最后一个兄弟节点
+
+        // 渲染变更后的内容
+        cut.Render();
+
+        var rowsC = cut.FindComponents<TreeViewRow<TreeFoo>>();
+        var source3 = rowsC[0]; // Root1
+        var target3 = rowsC[6]; // Root3
+
+        var drag3 = source3.Find(".tree-node");
+        // 拖动到 Root 的下方，成为根节点，且为最后一个兄弟节点
+        var drop3 = target3.Find(".tree-drop-child-below");
+
+        await drag3.TriggerEventAsync("ondragstart", new DragEventArgs());
+        await drop3.TriggerEventAsync("ondragenter", new DragEventArgs());
+        await drop3.TriggerEventAsync("ondrop", new DragEventArgs());
+
+        // Assert
+        Assert.Equal(3, nodes.Count);
+        Assert.Equal("Root2", nodes[0].Text);
+        Assert.Equal("Root1", nodes[2].Text); // Root1 成为最后一个根节点
     }
 
     [Fact]
@@ -1375,6 +1461,8 @@ public async Task Draggable_DragClassState()
         Assert.DoesNotContain("tree-drop-pass", row.Markup);
     }
 
+    #endregion
+
     class MockTree<TItem> : TreeView<TItem> where TItem : class
     {
         public bool TestComparerItem(TItem? a, TItem? b) => base.Equals(a, b);

Original file line number	Diff line number	Diff line change
`@@ -62,17 +62,20 @@`
`62`	`62`	`}`
`63`	`63`	`}`
`64`	`64`
	`65`	`+ @* 鼠标拖到节点中央，表示放置到当前节点内部作为最后一个子节点，显示边框预览 *@`
`65`	`66`	`@if (_previewChildLast)`
`66`	`67`	`{`
`67`	`68`	`<div class="tree-preview-child-last"></div>`
`68`	`69`	`}`
	`70`	`+ @* 展开状态下，拖到当前节点靠下的位置，插入到内部作为第一个子节点，显示线条预览 *@`
`69`	`71`	`@if (_previewChildFirst)`
`70`	`72`	`{`
`71`	`73`	`<div class="tree-preview-child-first">`
`72`	`74`	`<div class="tree-preview-circle"></div>`
`73`	`75`	`<div class="tree-preview-line"></div>`
`74`	`76`	`</div>`
`75`	`77`	`}`
	`78`	`+ @* 折叠状态或者没有子节点，拖到当前节点靠下的位置，作为同级节点，显示线条预览 *@`
`76`	`79`	`@if (_previewBelow)`
`77`	`80`	`{`
`78`	`81`	`<div class="tree-preview-below">`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ public enum TreeDropType`
`19`	`19`	`/// </summary>`
`20`	`20`	`AsLastChild,`
`21`	`21`	`/// <summary>`
`22`		`- /// 作为同级节点`
	`22`	`+ /// 作为下方同级节点`
`23`	`23`	`/// </summary>`
`24`	`24`	`AsSiblingBelow,`
`25`	`25`	`}`