Come implementare il drag and drop in Blazor?

blazor c# html

Domanda

So che Blazor è una nuova tecnologia. La sua versione attuale dichiara v0.5.1

Tuttavia, attualmente sto implementando un PoC per una nuova applicazione web. Ci piacerebbe avere la funzionalità trascina e rilascia nell'app. Ho provato a implementarlo in modo Blazor ma non funziona.

Il mio droptarget:

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

E l'oggetto trascinabile:

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

Il codice Blazor C #:

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

}

Il problema è che l'obiettivo di rilascio non viene visualizzato nel browser come destinazione di rilascio:

Trascina Drop nel browser

Quello che ho letto finora è che quando si collega un gestore di eventi a una funzione di Blazor C # (ad esempio ondragstart) rispetto al comportamento predefinito è il noto "e.preventDefault ()" che dovrebbe rendere droppable il drop target.

Qualcuno sa come risolvere questo problema?

Sven

Risposta popolare

IMPORTANTE: credo che UIDragEventArgs non sia attualmente supportato ...

... "rispetto al comportamento predefinito è il noto" e.preventDefault () "che dovrebbe rendere droppable il drop target" ==> Non ne sono sicuro.

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

}



Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché
Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché