C# 如何在Blazor中实现拖放?
我知道Blazor是一项新技术。其当前版本为v0.5.1 然而,我目前正在为一个新的web应用程序实现一个PoC。 我们希望在应用程序中具有拖放功能。 我试图以Blazor的方式实现它,但它不起作用 我的目标:C# 如何在Blazor中实现拖放?,c#,html,blazor,C#,Html,Blazor,我知道Blazor是一项新技术。其当前版本为v0.5.1 然而,我目前正在为一个新的web应用程序实现一个PoC。 我们希望在应用程序中具有拖放功能。 我试图以Blazor的方式实现它,但它不起作用 我的目标: <div class="col" ondragstart="@AllowDragOver" ondrop="@Add"> } 问题是放置目标在浏览器中不显示为放置目标: 到目前为止,我读到的是,当将事件处理程序附加到Blazor C#函数(例如ondragstart)时,
<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">
}
问题是放置目标在浏览器中不显示为放置目标:
到目前为止,我读到的是,当将事件处理程序附加到Blazor C#函数(例如ondragstart)时,默认行为是众所周知的“e.preventDefault()”,它应该使拖放目标可拖放
有人知道如何解决这个问题吗
Sven我想发布我的解决方案 到目前为止,我发现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的工作演示:你是我们的英雄@Sven!我什么时候能收到你的样品?@SeriousK。我终于成功地创建了一个工作示例。请看我上面更新的答案。
@functions {
void Add()
{
Items.Add("hello");
}
void AllowDragOver(UIDragEventArgs e)
{
}
<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">