Wie implementiert man Drag & Drop in Blazor?

blazor c# html

Frage

Ich weiß, Blazor ist eine neue Technologie. Die aktuelle Version lautet v0.5.1

Allerdings implementiere ich derzeit ein PoC für eine neue Webanwendung. Wir möchten, dass die Funktion per Drag & Drop in die App verschoben wird. Ich habe versucht, es Blazor zu implementieren, aber es funktioniert nicht.

Mein Dropziel:

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

Und der ziehbare Gegenstand:

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

Der Blazor C # -Code:

@functions {

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

void AllowDragOver(UIDragEventArgs e)
{
}

}

Das Problem besteht darin, dass das Drop-Ziel im Browser nicht als Drop-Ziel angezeigt wird:

Drag Drop im Browser

Was ich bisher gelesen habe, ist, dass beim Anhängen eines Event-Handlers an eine Blazor C # -Funktion (zB ondragstart) das bekannte Verhalten "e.preventDefault ()" das Drop-Target fallen lassen sollte.

Kann jemand das beheben?

Sven

Akzeptierte Antwort

Ich möchte meine Lösung posten.

Was ich bisher herausgefunden habe, ist, dass dataTransfer.setData in Blazor 0.5.1 derzeit nicht funktioniert. Ich kann dieses Problem umgehen, indem Sie das gezogene Element in einer gemeinsam genutzten C # -Klasse speichern, die als DI-Dienst eingefügt wird. Der Container muss den Aufruf von "e.preventDefault ()" haben, um ein gültiges Abwurfziel zu sein. Obwohl dies in C # nicht möglich ist, können Sie dies einfach als reines Javascript bezeichnen:

<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 & Drop funktioniert gut mit C # und ist sehr flüssig ohne Flackern und Unterbrechungen. Ich werde in den nächsten Tagen ein einfaches Arbeitsbeispiel erstellen.

AKTUALISIEREN:

Hier ist die versprochene Demo auf Github: https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop


Beliebte Antwort

Ja, wir alle wissen, dass es möglich ist, Javascript-Funktionen von Blazor-Komponenten aus aufzurufen. Das war nicht das Problem. Sie haben Ihren Code nicht zur Verfügung gestellt. Wenn Sie jedoch Blazor umgehen und durch die Verwendung von JavaScript Code erhalten, ist dies nicht der richtige Weg. Dies erinnert an einen Benutzer, der versucht hat, eine Baumansicht in Blazor zu erstellen, wobei die Baumansicht rein per JavaScript implementiert wurde. Ich habe etwas anderes vorgeschlagen, und es gelang ihm schließlich, die Baumansicht zu erstellen, ohne JavaScript zu verwenden. Wir müssen danach streben, die Verwendung von JavaScript zu minimieren und C # auf dem Client zu verwenden. Sehen Sie sich die Baumansicht hier an: Blazor-Zweiwege-Bindung wird nicht erkannt, wenn von JS aktualisiert wird



Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum
Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum