我知道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()”,它应该使放置目标可以放置。
有谁知道如何解决这一问题?
斯文
我想发布我的解决方案。
到目前为止我发现的是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#拖放效果非常好,非常流畅,没有闪烁和中断。我将在接下来的几天里创建一个简单的工作示例。
更新:
这是Github上承诺的演示:https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop
是的,我们都知道可以从Blazor组件调用Javascript函数。那不是问题。您没有提供代码。但是,如果你绕过Blazor,并使用JavaScript获得代码,那么这就不是了。这让用户想起了在Blazor中创建树视图的用户,纯粹通过JavaScript实现了树视图。我已经另外建议了,最后他成功地创建了treeview而根本没有使用任何JavaScript。这是我们必须努力的目标:最大限度地减少JavaScript的使用并在客户端上使用C#。在这里查看树视图:Blazor two-way bind not detected when is updated from JS
重要提示:我认为目前不支持UIDragEventArgs ...
...“比默认行为是众所周知的”e.preventDefault()“,这应该使得drop target droppable”==>我不确定。
Here's how you've got to set your elements.
Note: The code in the methods below is in Javascript. You've got to translate it to C#
<div id="targetDiv" class="col" ondrop="@Add" ondragover="@AllowDrop"></div>
<span id="draggedSpan" class="badge badge-warning" draggable="true" ondragstart="@AllowDragOver>îtem 1</span>
@functions {
void Add(UIDragEventArgs e)
{
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
Items.Add("hello");
}
void AllowDragOver(UIDragEventArgs e)
{
e.dataTransfer.setData("text", e.target.id);
}
void AllowDrop(UIDragEventArgs e)
{
e.preventDefault();
}
}