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:

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

Il codice Blazor C #:

@functions {

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

void AllowDragOver(UIDragEventArgs e)
{
}

}

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 accettata

Vorrei pubblicare la mia soluzione.

Quello che ho scoperto finora è che dataTransfer.setData attualmente non funziona in Blazor 0.5.1. Posso aggirarlo con il salvataggio dell'elemento trascinato in una classe C # condivisa che viene iniettata come servizio DI. Il contenitore deve avere la chiamata a "e.preventDefault ()" come destinazione di rilascio valida. Sebbene ciò non sia possibile in C #, puoi facilmente chiamarlo puro 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">

Drag and drop funziona piuttosto bene con C # e molto liscio senza sfarfallio e interruzioni. Creerò un semplice esempio di lavoro nei prossimi giorni.

AGGIORNARE:

Ecco la demo promessa su Github: https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop


Risposta popolare

Sì, sappiamo tutti che è possibile chiamare le funzioni Javascript dai componenti Blazor. Non era questo il problema. Non hai reso il tuo codice disponibile. Tuttavia, se elimini Blazor e ottieni il funzionamento del tuo codice utilizzando JavaScript, non è questa la strada da percorrere. Questo ricorda un utente che ha provato a creare una vista ad albero in Blazor, implementando la visualizzazione ad albero esclusivamente tramite JavaScript. Ho suggerito il contrario e alla fine è riuscito a creare la vista ad albero senza utilizzare alcun JavaScript. Qual è il motivo per cui dobbiamo lottare: minimizzare l'uso di JavaScript e usare C # sul client. Vedi la vista ad albero qui: Blazor bind a due vie non rilevato quando viene aggiornato da JS



Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow