如何在Blazor中实现拖放功能？

Question

我知道Blazor是一项新技术，目前发布的版本是v0.5.1。

然而，我正在为一个新的Web应用程序实现PoC。我们希望在应用程序中拥有拖放功能。我尝试以Blazor的方式实现它，但它无法工作。

我的droptarget：

<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">

可拖动的项目：

<span class="badge badge-warning" draggable="true">îtem 1</span>

Blazor的C#代码：

@functions {

void Add()
{
     Items.Add("hello");
}

void AllowDragOver(UIDragEventArgs e)
{
}

问题在于在浏览器中，拖放目标不会显示为拖放目标：

到目前为止，我所了解的是，当将事件处理程序附加到Blazor C#函数（例如ondragstart）时，默认行为是众所周知的“e.preventDefault()”，这应该使拖放目标可放置。

有谁知道如何修复这个问题吗？

Sven

- Sven

Answer 1

我想发布我的解决方案。

目前我发现dataTransfer.setData在Blazor 0.5.1中无法工作。我可以通过将拖动的元素保存在一个被注入为DI服务的共享C#类中来解决这个问题。 容器需要调用"e.preventDefault()"才能成为有效的放置目标。虽然在C#中这是不可能的，但你可以轻松地使用纯Javascript来调用它：

<div class="col-sm-1" dropzone="move" ondragenter="@(e => OnContainerDragEnter(e))" ondragover="event.preventDefault();" ondragleave="@(e => OnContainerDragLeave(e))"
 ondrop="@(e => OnContainerDrop(e, Date))" style="@_highlightColor;@_highlightDropTargetStyle">

使用C#拖放功能效果良好，流畅且没有闪烁和中断。我将在接下来的几天内创建一个简单的工作示例。

更新：

抱歉，我的示例已经过时，并且目前我没有足够的时间来维护这个演示及其源代码。因此，我想添加一个链接到Chris Sainty的工作演示：https://chrissainty.com/investigating-drag-and-drop-with-blazor/

- Sven

---

您是我们的英雄 @Sven！我可以在什么时候期待您的样品？ - serious

@SeriousK。我终于成功地创建了一个可工作的例子。请参见我上面更新的答案。 - Sven