Blazor WebAssembly组件拖拽事件问题：Div ID获取异常

问题分析 #

原代码中使用ElementReference.Id获取的是Blazor内部维护的元素数值标识，并非DOM元素的id属性，这就是你得到整数而非预期字符串的原因。

解决方案 #

我们可以通过直接在事件回调中传递DOM元素id的方式，精准获取拖拽起始和结束目标的id，无需依赖ElementReference。以下是适配你需求的实现：

完整代码示例 #

@page "/"
@inject HttpClient Http

<div draggable="true" id="div-1" style="border: 1px solid black; padding: 10px; margin: 10px;"
     @ondragstart="@(() => OnDragStart("div-1"))"
     @ondragenter="@(() => OnDragEnter("div-1"))">
    可拖拽元素1
</div>

<div draggable="true" id="div-2" style="border: 1px solid black; padding: 10px; margin: 10px;"
     @ondragstart="@(() => OnDragStart("div-2"))"
     @ondragenter="@(() => OnDragEnter("div-2"))">
    可拖拽元素2
</div>

<div id="target-1" style="border: 1px solid blue; padding: 10px; margin: 10px;"
     @ondragenter="@(() => OnDragEnter("target-1"))"
     @ondragend="@(() => OnDragEnd())">
    目标区域1
</div>

<div id="target-2" style="border: 1px solid blue; padding: 10px; margin: 10px;"
     @ondragenter="@(() => OnDragEnter("target-2"))"
     @ondragend="@(() => OnDragEnd())">
    目标区域2
</div>

@code {
    private string _startId;
    private string _currentEnteredId;

    // 记录拖拽起始元素id
    private void OnDragStart(string elementId)
    {
        _startId = elementId;
        Console.WriteLine($"拖拽起始: {_startId}");
    }

    // 记录当前鼠标进入的元素id（包括拖拽元素和目标区域）
    private void OnDragEnter(string elementId)
    {
        _currentEnteredId = elementId;
        Console.WriteLine($"当前进入元素: {_currentEnteredId}");
    }

    // 拖拽结束时执行服务器操作并重新渲染
    private async void OnDragEnd()
    {
        if (!string.IsNullOrEmpty(_startId) && !string.IsNullOrEmpty(_currentEnteredId))
        {
            Console.WriteLine($"完成拖拽: 从{_startId}到{_currentEnteredId}");
            
            // 调用服务器端数据库操作
            await Http.PostAsJsonAsync("/api/DragOperation", new { StartId = _startId, EndId = _currentEnteredId });
            
            // 重新渲染组件（可根据实际需求触发状态更新）
            StateHasChanged();
        }

        // 重置状态
        _startId = null;
        _currentEnteredId = null;
    }
}

关键说明 #

• 传递元素id：在@ondragstart、@ondragenter等事件中直接传入DOM元素的id字符串，避免依赖ElementReference的内部标识。
• 记录状态：用_startId存储拖拽起始元素id，_currentEnteredId存储鼠标最后进入的元素id（即抬起左键时所在的div）。
• 服务器操作与渲染：在ondragend事件中触发服务器请求，完成后调用StateHasChanged()强制组件重新渲染。
• 事件适配：给所有需要感知的div绑定ondragenter事件，确保能捕获鼠标抬起时所在的目标元素。

对原代码的修正说明 #

1. 原代码使用ElementReference.Id错误：该属性是Blazor内部用于标识元素的数值，并非DOM的id属性，所以会返回整数。
2. 新代码的优化点：直接传递id参数更简洁可靠，无需额外维护ElementReference，同时覆盖了拖拽起始和结束的完整状态记录。

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