如何在Blazor中實現拖放?

blazor c# html

我知道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#。請參閱此處的樹視圖: 從JS更新時未檢測到Blazor雙向綁定



許可下: CC-BY-SA with attribution
不隸屬於 Stack Overflow
這個KB合法嗎? 是的,了解原因
許可下: CC-BY-SA with attribution
不隸屬於 Stack Overflow
這個KB合法嗎? 是的,了解原因