Question
Je sais que Blazor est une nouvelle technologie. Sa version actuelle indique v0.5.1
Cependant, je suis en train de mettre en place un PoC pour une nouvelle application web. Nous aimerions avoir la fonctionnalité glisser-déposer dans l'application. J'ai essayé de l'implémenter à la manière Blazor mais cela ne fonctionne pas.
Mon droptarget:
<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">
Et l'article glissable:
<span class="badge badge-warning" draggable="true">îtem 1</span>
Le code Blazor C #:
@functions {
void Add()
{
Items.Add("hello");
}
void AllowDragOver(UIDragEventArgs e)
{
}
}
Le problème est que la cible de dépôt ne s'affiche pas dans le navigateur en tant que cible de dépôt:
Ce que j’ai lu jusqu’à présent, c’est que lorsqu’un gestionnaire d’événements attaché à une fonction Blazor C # (par exemple, ondragstart), le comportement par défaut est le bien connu "e.preventDefault ()", qui devrait rendre la cible de dépôt largable.
Est-ce que quelqu'un sait comment réparer ceci?
Sven
Réponse populaire
IMPORTANT: Je pense qu'UIDragEventArgs n'est pas pris en charge pour le moment ...
... "que le comportement par défaut est le bien connu" e.preventDefault () "qui devrait rendre la cible de largage droppable" ==> Je n'en suis pas sûr.
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();
}
}