如何在MudBlazor的MudTable中实现拖拽排序功能

当前实现代码 #

@page "/main"
@using MudBlazor

<MudPaper Class="ma-4 flex-grow-1">
    <MudDropContainer T="Student" Items="_students" ItemDropped="ItemUpdated" Class="d-flex flex-column mud-height-full">
        <ChildContent>
            <MudDropZone T="Student" Identifier="singleDropZone" Class="flex-grow-1" AllowReorder="true">
                <MudTable Items="_students">
                    <HeaderContent>
                        <MudTh>Name</MudTh>
                        <MudTh>Age</MudTh>
                        <MudTh>Degree</MudTh>
                        <MudTh>College</MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTr>
                            <MudTd DataLabel="Name">@context.Name</MudTd>
                            <MudTd DataLabel="Age">@context.Age</MudTd>
                            <MudTd DataLabel="Degree">@context.Degree</MudTd>
                            <MudTd DataLabel="College">@context.College</MudTd>
                        </MudTr>
                    </RowTemplate>
                </MudTable>
            </MudDropZone>
        </ChildContent>
        <ItemRenderer>
            <MudListItem>
                <MudTextField Value="@context.Name" Label="Name" ReadOnly="true" />
                <MudTextField Value="@context.Age.ToString()" Label="Age" ReadOnly="true" />
                <MudTextField Value="@context.Degree" Label="Degree" ReadOnly="true" />
                <MudTextField Value="@context.College" Label="College" ReadOnly="true" />
            </MudListItem>
        </ItemRenderer>
    </MudDropContainer>
</MudPaper>

@code {
    private void ItemUpdated(MudItemDropInfo<Student> dropItem)
    {
        // Remove the item from the old position
        _students.Remove(dropItem.Item);
        
        // Insert the item at the new position
        _students.Insert(dropItem.Index, dropItem.Item);
    }

    private List<Student> _students = new()
    {
        new Student { Name = "John Doe", Age = 20, Degree = "B.Sc", College = "College A" },
        new Student { Name = "Jane Smith", Age = 22, Degree = "B.A", College = "College B" },
        new Student { Name = "Alice Johnson", Age = 21, Degree = "B.Com", College = "College C" },
        new Student { Name = "Bob Brown", Age = 23, Degree = "B.Tech", College = "College D" },
        new Student { Name = "Charlie Green", Age = 24, Degree = "B.Arch", College = "College E" }
    };

    public class Student
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Degree { get; set; }
        public string College { get; set; }
    }
}

遇到的问题 #

• MudItemDropInfo 不包含 Index 属性，导致编译错误
• 尝试多种替代方案后，拖拽排序功能仍无法正常工作

尝试过的替代方案 #

方案1：移除Index相关逻辑 #

private void ItemUpdated(MudItemDropInfo<Student> dropItem)
{
    // Attempted to reorder without index
    var item = dropItem.Item;
    _students.Remove(item);
    // Logic to insert at new position needed
}

缺少插入到新位置的有效逻辑，无法完成排序。

方案2：将表格行包裹在放置区域内 #

<MudDropZone T="Student" Identifier="singleDropZone" Class="flex-grow-1" AllowReorder="true">
    <MudTable Items="_students">
        <RowTemplate>
            <MudTr>
                <MudTd DataLabel="Name">@context.Name</MudTd>
                <MudTd DataLabel="Age">@context.Age</MudTd>
                <MudTd DataLabel="Degree">@context.Degree</MudTd>
                <MudTd DataLabel="College">@context.College</MudTd>
            </MudTr>
        </RowTemplate>
    </MudTable>
</MudDropZone>

拖拽功能依旧无法正常触发。

需求 #

• 单个放置区域内展示表格
• 通过拖拽表格行实现列表排序

解决方案 #

要实现MudTable行的拖拽排序，需要调整MudDropContainer和MudTable的结合方式，核心是让表格行成为可拖拽项，同时利用MudItemDropInfo的正确属性处理排序：

完整可用代码 #

@page "/main"
@using MudBlazor

<MudPaper Class="ma-4 p-4">
    <MudDropContainer T="Student" 
                      Items="_students" 
                      ItemDropped="HandleItemDropped"
                      Class="w-full">
        <ChildContent>
            <MudDropZone T="Student" Identifier="tableZone" AllowReorder="true" Class="w-full">
                <MudTable Items="_students" Hover="true" Striped="true">
                    <HeaderContent>
                        <MudTh>拖拽</MudTh>
                        <MudTh>Name</MudTh>
                        <MudTh>Age</MudTh>
                        <MudTh>Degree</MudTh>
                        <MudTh>College</MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTr>
                            <MudTd>
                                <!-- 添加拖拽手柄，提升用户体验 -->
                                <MudIconButton Icon="@Icons.Material.Filled.DragIndicator" />
                            </MudTd>
                            <MudTd DataLabel="Name">@context.Name</MudTd>
                            <MudTd DataLabel="Age">@context.Age</MudTd>
                            <MudTd DataLabel="Degree">@context.Degree</MudTd>
                            <MudTd DataLabel="College">@context.College</MudTd>
                        </MudTr>
                    </RowTemplate>
                </MudTable>
            </MudDropZone>
        </ChildContent>
        <!-- 自定义拖拽时的预览样式 -->
        <ItemRenderer>
            <MudPaper Elevation="8" Class="p-2 w-full">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.DragIndicator" Class="mr-2"/>
                    <span>@context.Name</span>
                </div>
            </MudPaper>
        </ItemRenderer>
    </MudDropContainer>
</MudPaper>

@code {
    private List<Student> _students = new()
    {
        new Student { Name = "John Doe", Age = 20, Degree = "B.Sc", College = "College A" },
        new Student { Name = "Jane Smith", Age = 22, Degree = "B.A", College = "College B" },
        new Student { Name = "Alice Johnson", Age = 21, Degree = "B.Com", College = "College C" },
        new Student { Name = "Bob Brown", Age = 23, Degree = "B.Tech", College = "College D" },
        new Student { Name = "Charlie Green", Age = 24, Degree = "B.Arch", College = "College E" }
    };

    private void HandleItemDropped(MudItemDropInfo<Student> dropInfo)
    {
        // 获取原始索引和目标索引
        var oldIndex = _students.IndexOf(dropInfo.Item);
        var newIndex = dropInfo.DropZoneIndex;

        // 移除并插入到新位置
        _students.RemoveAt(oldIndex);
        _students.Insert(newIndex, dropInfo.Item);
        
        // 通知组件更新UI
        StateHasChanged();
    }

    public class Student
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Degree { get; set; }
        public string College { get; set; }
    }
}

关键调整说明 #

1. 使用正确的索引属性：MudItemDropInfo的DropZoneIndex属性代表拖拽目标位置的索引，替代原来错误的Index属性
2. 明确拖拽区域配置：确保MudDropZone包裹整个表格，并且开启AllowReorder="true"
3. 优化拖拽体验：添加拖拽手柄图标，让用户明确可拖拽的交互位置
4. 触发UI更新：排序完成后调用StateHasChanged()确保表格视图刷新

内容的提问来源于stack exchange，提问作者Rohit Suryaa Saravanan