Razor页面实现跨表格行拖拽功能遇阻求助

核心问题分析 #

1. 拖拽启动事件参数错误：循环内@ondragstart传入的test是未定义变量，应替换为当前循环的@class对象。
2. 未阻止拖拽默认行为：AllowDrop方法必须调用e.PreventDefault()，否则浏览器会默认阻止drop事件触发，因为原生规则不允许元素直接接受拖拽内容。
3. 集合类型限制：若API返回的是只读集合，直接调用Remove会报错，需将draggedClass转为可修改的List<Class1>。
4. 拖拽数据传递规范：遵循浏览器拖拽API规范设置DataTransfer数据，能提升跨场景兼容性。

修正后的完整代码 #

@inject NavigationManager navigationManager
@using System.Net.Http.Json
@inject TestApi2 testApi2
@inject TestApi testApi

<PageTitle>Test</PageTitle>

<div class="container">
    <div class="header">
        Teststellung
    </div>
    <div class="content">
        <div class="column">
            <div class="column">
                <table id="table2" @ondrop="OnDrop" @ondragover="AllowDrop">
                    <thead>
                        <tr>
                            <th>Nr</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (droppedClass.Count == 0)
                        {
                            for (int i = 0; i <= 1; i++)
                            {
                                <tr class="red-row">
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                            }
                        }
                        else
                        {
                            foreach (var @class in droppedClass)
                            {
                                <tr class="red-row">
                                    <td>@class.Nr</td>
                                    <td>@class.Name</td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
            <div class="column">
                <div class="test-plan-table">
                    <table id="table1">
                        <thead>
                             <tr>
                                <th>Nr</th>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var @class in draggedClass)
                            {
                                <tr class="red-row list-item" 
                                    @ondragstart="@((e) => OnDragStart(e, @class))" 
                                    draggable="true">
                                    <td>@class.Nr</td>
                                    <td>@class.Name</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private List<Class1> draggedClass = new List<Class1>();
    private List<Class1> droppedClass = new List<Class1>();
    private ICollection<Class2> mainClass = new List<Class2>();
    public bool isModalVisible;

    private Class1 draggedItem;

    // 启动拖拽
    private void OnDragStart(DragEventArgs e, Class1 item)
    {
        draggedItem = item;
        e.DataTransfer.EffectAllowed = "move";
        // 可选：设置DataTransfer数据兼容原生拖拽逻辑
        e.DataTransfer.SetData("text/plain", item.Nr.ToString());
    }

    // 允许放置
    private void AllowDrop(DragEventArgs e)
    {
        e.PreventDefault(); // 必须阻止默认行为，否则drop事件无法触发
        e.DataTransfer.DropEffect = "move";
    }

    // 处理放置
    private void OnDrop(DragEventArgs e)
    {
        e.PreventDefault(); // 阻止默认拖拽行为（如打开链接）
        if (draggedItem != null && draggedClass.Contains(draggedItem))
        {
            draggedClass.Remove(draggedItem);
            droppedClass.Add(draggedItem);
            draggedItem = null;
            StateHasChanged();
        }
    }

    protected override async Task OnInitializedAsync()
    {
        mainClass = await testApi2.GetItems();
        // 将API返回集合转为可修改List
        var apiItems = await testApi.GetItems();
        draggedClass = apiItems.ToList();
    }
}

额外说明 #

• 若要将表格行封装为独立Razor组件，只需确保组件根元素（如<tr>）设置draggable="true"，并通过组件参数将拖拽事件和数据传递到父组件即可。
• 如需添加拖拽视觉反馈，可在ondragstart和ondragend事件中修改行的样式（如添加半透明效果）。

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