MudBlazor MudDropZone：如何保留源拖拽项并复制至目标区域？

要实现指定源区域拖拽时保留源项原索引，同时在目标区域生成副本，核心是阻止默认移动逻辑，手动处理副本创建和插入，具体步骤如下：

1. 标记可复制的源拖拽区域 #

给需要开启复制功能的MudDropZone设置Tag属性作为标识，方便后续事件中判断：

<MudDropZone T="Item" Items="SourceList" Tag="copy-source" 
             ItemDropped="OnItemDropped" Class="m-2 p-4 border rounded">
    <!-- 可拖拽项内容 -->
</MudDropZone>

2. 自定义ItemDropped事件处理逻辑 #

在事件中先判断拖拽来源是否为标记的复制源，取消默认操作后手动添加副本：

private void OnItemDropped(DropZoneItemDroppedEventArgs<Item> args)
{
    // 仅处理来自标记为copy-source的源区域的拖拽
    if (args.DragOrigin?.Tag?.ToString() == "copy-source")
    {
        // 取消组件默认的移动操作，避免源项位置变更
        args.Cancel = true;

        // 创建拖拽项的副本（引用类型需深拷贝，示例用浅拷贝）
        var itemCopy = new Item { Id = Guid.NewGuid(), Name = args.Item.Name };

        // 将副本插入到目标列表的指定位置（args.Index是拖拽目标位置）
        if (args.Index >= 0 && args.Index <= TargetList.Count)
        {
            TargetList.Insert(args.Index, itemCopy);
        }
        else
        {
            TargetList.Add(itemCopy);
        }

        StateHasChanged();
    }
    // 非复制源的拖拽，可保留默认移动逻辑或自定义处理
}

关键注意事项 #

• 必须取消默认操作：args.Cancel = true会阻止MudBlazor自动修改源列表，从根本上避免源项被重新排序或移动。
• 副本需独立实例：如果拖拽项是引用类型，必须创建新实例（深拷贝），避免源项和副本共享数据导致意外联动。
• 目标位置精准插入：利用args.Index确定插入位置，保证副本在目标区域的拖拽落点正确。

完整示例组件代码：

@page "/"

<MudGrid>
    <MudItem xs="6">
        <MudPaper Elevation="1" Class="p-4">
            <MudText Typo="Typo.h6">源区域（可复制）</MudText>
            <MudDropZone T="Item" Items="SourceList" Tag="copy-source" 
                         ItemDropped="OnItemDropped" Class="mt-2">
                @foreach (var item in SourceList)
                {
                    <MudDraggable T="Item" Item="item" Class="p-2 mb-2 bg-gray-100 rounded">
                        @item.Name
                    </MudDraggable>
                }
            </MudDropZone>
        </MudPaper>
    </MudItem>
    <MudItem xs="6">
        <MudPaper Elevation="1" Class="p-4">
            <MudText Typo="Typo.h6">目标区域</MudText>
            <MudDropZone T="Item" Items="TargetList" 
                         ItemDropped="OnItemDropped" Class="mt-2">
                @foreach (var item in TargetList)
                {
                    <MudDraggable T="Item" Item="item" Class="p-2 mb-2 bg-gray-100 rounded">
                        @item.Name (副本)
                    </MudDraggable>
                }
            </MudDropZone>
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    private List<Item> SourceList = new()
    {
        new Item { Id = 1, Name = "示例项1" },
        new Item { Id = 2, Name = "示例项2" },
        new Item { Id = 3, Name = "示例项3" }
    };

    private List<Item> TargetList = new();

    private void OnItemDropped(DropZoneItemDroppedEventArgs<Item> args)
    {
        if (args.DragOrigin?.Tag?.ToString() == "copy-source")
        {
            args.Cancel = true;
            var itemCopy = new Item { Id = Guid.NewGuid(), Name = args.Item.Name };
            if (args.Index >= 0 && args.Index <= TargetList.Count)
            {
                TargetList.Insert(args.Index, itemCopy);
            }
            else
            {
                TargetList.Add(itemCopy);
            }
            StateHasChanged();
        }
    }

    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

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