如何在Mudblazor Table中实现可拖拽行？求非JS方案指导

因为MudBlazor官方API没有内置拖拽行功能，你可以利用Blazor原生的HTML拖拽事件来实现，完全不需要额外JS。以下是具体思路和代码示例：

核心思路 #

1. 利用Blazor原生拖拽事件：给表格行绑定draggable属性和ondragstart、ondragover、ondrop事件，实现拖拽的触发、允许放置和放置完成逻辑。
2. 维护数据源顺序：拖拽完成后调整数据源中元素的位置，Blazor会自动更新UI（或手动触发更新）。
3. 添加视觉反馈：通过绑定状态变量，给拖拽中的行添加特殊样式，提升用户体验。

实现步骤与代码示例 #

1. 定义数据模型与数据源 #

// 数据模型
public class Item
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
}

// 数据源，使用ObservableCollection可自动通知UI更新（不用手动调用StateHasChanged）
private ObservableCollection<Item> Items = new ObservableCollection<Item>
{
    new() { Id = 1, Name = "商品A" },
    new() { Id = 2, Name = "商品B" },
    new() { Id = 3, Name = "商品C" },
    new() { Id = 4, Name = "商品D" }
};

// 记录当前被拖拽的行数据
private Item? _draggedItem;

2. 渲染带拖拽功能的MudTable #

<MudTable Items="@Items" Hover="true" Bordered="true">
    <HeaderContent>
        <MudTh>ID</MudTh>
        <MudTh>名称</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTr 
            draggable="true"
            @ondragstart="() => _draggedItem = context"
            @ondragover="(e) => e.PreventDefault()" <!-- 必须阻止默认行为才能触发drop -->
            @ondrop="() => HandleDrop(context)"
            class="@(_draggedItem == context ? "dragging-row" : "")">
            <MudTd>@context.Id</MudTd>
            <MudTd>@context.Name</MudTd>
        </MudTr>
    </RowTemplate>
</MudTable>

3. 实现拖拽放置逻辑 #

private void HandleDrop(Item targetItem)
{
    if (_draggedItem == null || _draggedItem == targetItem) return;

    var sourceIdx = Items.IndexOf(_draggedItem);
    var targetIdx = Items.IndexOf(targetItem);

    if (sourceIdx == -1 || targetIdx == -1) return;

    // 移除原位置的元素，插入到目标位置
    Items.RemoveAt(sourceIdx);
    Items.Insert(targetIdx, _draggedItem);

    // 重置拖拽状态
    _draggedItem = null;
}

4. 添加拖拽视觉样式 #

在组件的<style>标签中添加自定义样式：

.dragging-row {
    background-color: rgba(98, 0, 238, 0.1);
    border-left: 4px solid #6200ee;
}

注意事项 #

• 如果使用普通List<T>而不是ObservableCollection，需要在数据更新后手动调用StateHasChanged()通知UI刷新。
• 若表格开启了分页，拖拽逻辑仅适用于当前页数据，如需跨页拖拽，需要额外处理分页数据的合并与重新分页。
• 可以扩展拖拽图标：在表头或行首添加拖拽图标（比如<MudIcon Icon="@Icons.Material.Outlined.DragIndicator" />），增强交互提示。

内容的提问来源于stack exchange，提问作者discovery999