Question

我知道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（）”，它应使放置目标可放置。

有人知道如何解决此问题吗？

斯文

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＃中效果很好，并且非常平滑，没有闪烁和中断。在接下来的几天中，我将创建一个简单的工作示例。

更新：

以下是在Github上承诺的演示：https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop

Answer 2

是的，我们都知道可以从Blazor组件调用Javascript函数。那不是问题。您没有使代码可用。但是，如果您绕开Blazor，并使用JavaScript来使代码正常工作，那么这不是走的路。这让用户想起了试图在Blazor中创建树视图的用户，该用户仅通过JavaScript来实现树视图。我提出了其他建议，最后他完全不用任何JavaScript就成功创建了树视图。我们必须努力做到这一点：最小化JavaScript的使用并在客户端上使用C＃。在此处查看树状视图：Blazor two-way bind not detected when is updated from JS

Answer 3

重要提示：我认为目前不支持UIDragEventArgs ...

...“默认行为是众所周知的“ e.preventDefault（）”，它应该使投放目标可投放目标” ==>我不确定。

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();
}

}

如何在Blazor中实现拖放？

3 个答案: