Blazor中无法读取.zoom-container元素，拖拽功能失效求助

需要实现点击按钮后拖拽.zoom-container内元素修改位置，但脚本始终无法读取该容器元素，导致Sortable拖拽功能失效。已尝试元素隐藏替换（不符合地图编辑器需求）、setTimeout延迟加载（无效），核心问题为容器无法被检测到。

1. 绑定Blazor元素引用直接传递给JS（最可靠方案） #

Blazor组件的DOM渲染是异步的，用querySelector依赖全局选择器容易错过渲染时机。改用@ref绑定元素直接传给JS：

• 修改HTML结构，添加元素引用：

<div class="map-container" @onclick="OnMapClick">
    <div @ref="zoomContainerRef" class="zoom-container" style="transform: scale(1);">
        @if (salonResponse.dibujos != null && salonResponse.dibujos.Any())
        {...}
    </div>
</div>

• 在Blazor组件代码中定义引用变量：

private ElementReference zoomContainerRef;

• 调整JS方法，直接接收传入的容器元素：

window.initializeSortable = (container) => {
    if (container) {
        Sortable.create(container, {
            animation: 150,
            onStart: () => {
                DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', true)
                    .catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));
            },
            onEnd: (evt) => {
                const elementId = evt.item.id.replace('dibujo-', '');
                const newX = evt.item.offsetLeft;
                const newY = evt.item.offsetTop;
                logMessage(`Element ${elementId} moved to X: ${newX}, Y: ${newY}`);
                DotNet.invokeMethodAsync('RMSuit_v2', 'UpdateElementPositionAsync', parseInt(elementId), newX, newY)
                    .catch(error => logMessage(`Error al actualizar la posición: ${error}`));
                DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', false)
                    .catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));
            }
        });
    } else {
        logMessage('Sortable: el contenedor no se encontró.');
    }
};

• 在Blazor生命周期方法中调用JS，确保DOM渲染完成：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // 确保数据加载完成且组件首次渲染后执行
    if (salonResponse?.dibujos?.Any() == true)
    {
        await JSRuntime.InvokeVoidAsync("initializeSortable", zoomContainerRef);
    }
}

2. 验证容器是否真的被渲染 #

在浏览器控制台执行document.querySelector('.zoom-container')，如果返回null，说明：

• salonResponse.dibujos数据未正确加载，导致@if条件不满足，容器未渲染
• 检查组件数据加载逻辑，确保salonResponse.dibujos有值时才渲染容器

3. 移除无效的setTimeout #

原代码中的固定100ms延迟无法适配Blazor的异步渲染节奏，改用OnAfterRenderAsync生命周期方法可以精准把握DOM就绪时机，不需要额外延迟。

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