如何在 Blazor 中实现拖放?
How to implement drag and drop in Blazor?
我知道 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()",它应该使放置目标可放置。
有人知道如何解决这个问题吗?
斯文
我想 post 我的解决方案。
到目前为止,我发现 dataTransfer.setData 目前在 Blazor 0.5.1 中不起作用。我可以通过将拖动的元素保存在作为 DI 服务注入的共享 C# class 中来解决此问题。
容器需要调用“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 的工作演示中添加一个 link:https://chrissainty.com/investigating-drag-and-drop-with-blazor/
我知道 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()",它应该使放置目标可放置。
有人知道如何解决这个问题吗?
斯文
我想 post 我的解决方案。
到目前为止,我发现 dataTransfer.setData 目前在 Blazor 0.5.1 中不起作用。我可以通过将拖动的元素保存在作为 DI 服务注入的共享 C# class 中来解决此问题。 容器需要调用“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 的工作演示中添加一个 link:https://chrissainty.com/investigating-drag-and-drop-with-blazor/