16

我知道 Blazor 是一项新技术。其当前版本状态为 v0.5.1

但是，我目前正在为新的 Web 应用程序实现 PoC。我们希望在应用程序中具有拖放功能。我试图以 Blazor 的方式实现它，但它不起作用。

我的投放目标：

<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()”，它应该使放置目标可放置。

有谁知道如何解决这一问题？

斯文

4

1 回答 1

16

我想发布我的解决方案。

到目前为止，我发现 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 ://chrissinty.com/investigating-drag-and-drop-with-blazor/

于 2018-10-05T07:11:46.060 回答