如何在Blazor中实现拖放? [英] How to implement drag and drop in Blazor?

问题描述

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

I know Blazor is a new technology. Its current release states v0.5.1

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

However I'm currently implementing a PoC for a new web application. We'd like to have the feature drag&drop in the app. I tried to implement it the Blazor way but it does not work.

我的放置目标:

<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">

和可拖动项:

<span class="badge badge-warning" draggable="true">îtem 1</span>

Blazor C#代码:

The Blazor C# code:

@functions {

void Add()
{
     Items.Add("hello");
}

void AllowDragOver(UIDragEventArgs e)
{
}

}

问题是放置目标没有在浏览器中显示为放置目标:

The problem is that the drop target does not show in the browser as a drop target:

到目前为止，我所读到的是，将事件处理程序附加到Blazor C#函数(例如ondragstart)时，默认行为是众所周知的"e.preventDefault()"，它应该使放置目标可放置.

What I've read so far is that when attaching an event handler to a Blazor C# function (e.g. ondragstart) than the default behavior is the well-known "e.preventDefault()" which should make the drop target droppable.

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

Does anyone know how to fix this?

斯文

推荐答案

我想发布我的解决方案.

I'd like to post my solution.

到目前为止，我发现dataTransfer.setData目前在Blazor 0.5.1中不起作用.我可以通过将拖动的元素保存在作为DI服务注入的共享C#类中来解决此问题. 容器需要具有对"e.preventDefault()"的调用.成为有效的掉落目标.尽管这在C#中是不可能的，但您可以轻松地将其称为纯Javascript:

What I've found out so far is that dataTransfer.setData currently does not work in Blazor 0.5.1. I can workaround this with saving the dragged element in a shared C# class that is injected as a DI service. The container needs to have the call to "e.preventDefault()" to be a valid drop target. Though this is not possible in C# you easily can call this as pure 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#中效果很好，并且非常平滑，没有闪烁和中断.在接下来的几天中，我将创建一个简单的工作示例.

Drag and drop works pretty good with C# and very smooth without flickering and interruptions. I will create a simple working example in the next days.

更新:

对不起，我的示例已经过时，目前我没有足够的时间来维护此演示及其源代码.因此，我想从Chris Sainty添加一个工作示例的链接: https://chrissainty.com/investigating-drag-and-drop-with-blazor/

Sorry, my example is already outdated and currently I haven't enough time to maintain this demo along with its source. So I'd like to add a link to a working demo from Chris Sainty: https://chrissainty.com/investigating-drag-and-drop-with-blazor/

这篇关于如何在Blazor中实现拖放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！