Blazor 拖放：ondragleave 在放置时触发，而不是 ondrop

Question

我是一个菜鸟，试图在我的 blazor 8 混合应用程序中实现拖放，但 ondrop 事件没有触发。相反，当我释放鼠标时，ondragleave 会被触发。

我们有两张桌子：

面板 A - 有 -> 代理

面板 B -有-> DataComponent

我们可以通过拖动代理或组件来启动拖动操作。这会将底层数据传递给面板 B，面板 B 管理由组件呈现的数据列表

应允许在面板 B 内或面板 B 中的组件顶部放置，以便对元素进行重新排序。

如上所述，B面板的ondrop事件永远不会被触发，而是ondragleave。

-我已在所有组件上设置 @ondragenter:preventDefault="true" 和 @ondragover:preventDefault="true"。

-有人建议我阻止组件的渲染，因为这可能会导致 DOM 树在拖动操作期间失去对面板 B 实例的跟踪，但我不确定如何在不破坏所有内容的情况下做到这一点。通过检查 Edge 上的元素，似乎面板实际上并未重新渲染，所以我不知道该怎么做。 我还实现了一个上下文菜单，但这应该与这里无关。

B 组：

<div id="-panel-wrapper">
    
    <div id="@DropZoneId"
         @onclick="Click"

         @ondragover:preventDefault="true"
         @ondrop="args => OnDrop(args)"

         @ondragenter="args => OnDragEnter(args)"
         @ondragleave="args => OnDragLeave(args)"

         @oncontextmenu:preventDefault="true"
         @oncontextmenu="args => ContextMenu(args)"
    >   

        @*  
            Iterate over the items in the  panel.
        *@        
        @for (int i = 0; i < _dataItems.Count; i++)
        {
            Data item = _dataItems[i];
           
            <div class="Data-row">

                <div class="row-index"> @(i + 1) </div>
                <div class="row-item">
                    <CascadingValue Value="@this">
                        @{  
                            // Generate a unique id for the component.
                            string id = "fic-" + i.ToString();
                        }

                        @* Render the data. *@
                        <DataComponent @ref="_reference" Id="@id"
                            Data="@item" ContextMenuCallback="ContextMenuInst"
                            @oncontextmenu:stopPropagation="true"
                        >
                        </DataComponent>
                        
                    </CascadingValue>
                </div>
            </div>
        }
    </div>

</div>

数据组件：

<div class="@State.ContextClass()" id="@Id"
    draggable="@State.Draggable"
    @oncontextmenu:preventDefault="true"
    @oncontextmenu:stopPropagation="true"
    @oncontextmenu="args => OnContextMenu((args, this))"

    @ondragenter:preventDefault="true"
    @ondragover:preventDefault="true"

    @ondragstart="args => OnDragStart(args)"
    @ondragenter="args => OnDragEnter(args)"
    @ondragend="args => OnDragEnd(args)"
    
>
    @* @ondragenter="args => OnDragEnter(args)"
    @ondragleave="args => OnDragLeave(args)"
    @ondrop="args => OnDrop(args)" *@
</div>

实际的组件事件处理程序被委托给 State 对象。

如有任何提示，我们将不胜感激。 预先感谢！

Answer 1

正如 @SMSTJ 在评论中提到的，

ondragover="event.preventDefault();"

而不是

@ondragover:preventDefault="true"

（或

@ondragover:preventDefault

）解决了问题。

在大多数组件中，用于拖放 API 的 Blazor 界面按预期工作，但这里需要 JS 互操作。我的猜测是，这可能是由于 Blazor 丢失了组件引用的踪迹。