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 acceptée
Je voudrais poster ma solution.
Ce que j’ai découvert jusqu’à présent, c’est que dataTransfer.setData ne fonctionne pas actuellement dans Blazor 0.5.1. Je peux contourner ce problème en enregistrant l'élément déplacé dans une classe C # partagée injectée en tant que service DI. Le conteneur doit avoir l'appel de "e.preventDefault ()" pour être une cible de rejet valide. Bien que cela ne soit pas possible en C #, vous pouvez facilement appeler cela du Javascript pur:
<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">
Le glisser-déposer fonctionne plutôt bien avec C # et très lisse, sans scintillement ni interruption. Je vais créer un exemple de travail simple dans les prochains jours.
METTRE À JOUR:
Voici la démo promise sur Github: https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop
Réponse populaire
Oui, nous savons tous qu'il est possible d'appeler des fonctions Javascript à partir de composants Blazor. Ce n'était pas le problème. Vous n'avez pas rendu votre code disponible. Cependant, si vous contournez Blazor et que votre code fonctionne en utilisant JavaScript, ce n'est pas la voie à suivre. Cela rappelle un utilisateur qui a essayé de créer une arborescence dans Blazor, en implémentant l’ arborescence uniquement par JavaScript. J'ai suggéré le contraire, et il a enfin réussi à créer l'arborescence sans utiliser de JavaScript. C’est ce que nous devons faire: minimiser l’utilisation de JavaScript et utiliser C # sur le client. Voir l'arborescence ici: La liaison bidirectionnelle Blazor non détectée lorsqu'elle est mise à jour à partir de JS.