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:

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

Der Blazor C # -Code:

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

}

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

Beliebte Antwort

WICHTIG: Ich glaube, dass UIDragEventArgs derzeit nicht unterstützt wird ...

... "als das Standardverhalten ist das bekannte" e.preventDefault () ", das das Drop-Ziel droppable machen sollte" ==> Ich bin mir nicht sicher.

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

}



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