如何在Blazor中實現拖放?

blazor c# html

我知道Blazor是一項新技術。它目前的發布狀態為v0.5.1

但是,我目前正在為新的Web應用程序實現PoC。我們希望在應用中使用拖放功能。我嘗試用​​Blazor方式實現它,但它不起作用。

我的droptarget:

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

和可拖動的項目:

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

Blazor C#代碼:

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

}

問題是放置目標不會在瀏覽器中顯示為放置目標:

在瀏覽器中拖放

到目前為止我所讀到的是,當將事件處理程序附加到Blazor C#函數(例如ondragstart)時,默認行為是眾所周知的“e.preventDefault()”,它應該使放置目標可以放置。

有誰知道如何解決這一問題?

斯文

熱門答案

重要提示:我認為目前不支持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();
}

}



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