WebAssembly 中的简单拖放

Question

我希望在我的 Blazor WebAssembly 组件中添加感知拖动事件的能力。我想要的真的很简单（我认为）。我不需要真正放下项目，我只需要感知用户单击鼠标所在的 div 的 id 名称，然后感知用户抬起鼠标左键的 div 的 id 名称。

我希望在执行一些服务器端数据库操作后重新渲染组件。我会认为这很简单，但是在阅读了 2 天 Chris Sanity 的帖子和其他几十篇文章之后……我可以运行的唯一可行代码如下。问题是 draggedItemId 作为整数返回而不是 'myDraggableDiv'

欢迎任何帮助！

@page "/"

<div draggable="true" id="myDraggableDiv" @ondragstart="HandleDragStart" @ref="draggedElement">Drag me!</div>

@code {
    
    private ElementReference draggedElement;
    private string draggedItemId;

    private void HandleDragStart(DragEventArgs e)
    {
        draggedItemId = draggedElement.Id;
        Console.WriteLine(draggedItemId);
    }
}

Answer 1

ElementReference.Id

没有给你html元素的id属性。

你可以使用

@ondragstart="@(e => HandleDragStart(e, "myDraggableDiv"))"

private void HandleDragStart(DragEventArgs e, string id)
{
    draggedItemId = id;
    Console.WriteLine(draggedItemId);
}