Question
Je sais que Blazor est une nouvelle technologie. Sa version actuelle indique la v0.5.1
Cependant, j'implémente actuellement 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 de Blazor mais cela ne fonctionne pas.
Mon droptarget:
<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">
Et l'élément déplaçable:
<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 lorsque vous attachez un gestionnaire d'événements à une fonction Blazor C # (par exemple ondragstart), le comportement par défaut est le bien connu "e.preventDefault ()", qui devrait rendre la cible de suppression supprimable.
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 cela en enregistrant l'élément glissé dans une classe C # partagée qui est injectée en tant que service DI. Le conteneur doit avoir l'appel à "e.preventDefault ()" pour être une cible de dépôt valide. Bien que cela ne soit pas possible en C #, vous pouvez facilement appeler cela comme 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 assez bien avec C # et très fluide sans scintillement ni interruption. Je vais créer un exemple de travail simple dans les prochains jours.
MISE À 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.
Sous licence: CC-BY-SA with attribution
Non affilié à Stack Overflow