Pregunta
Sé que Blazor es una nueva tecnología. Su versión actual establece v0.5.1
Sin embargo, actualmente estoy implementando un PoC para una nueva aplicación web. Nos gustaría tener la función de arrastrar y soltar en la aplicación. Intenté implementarlo a la manera Blazor pero no funciona.
Mi droptarget:
<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">
Y el elemento arrastrable:
<span class="badge badge-warning" draggable="true">îtem 1</span>
El código Blazor C #:
@functions {
void Add()
{
Items.Add("hello");
}
void AllowDragOver(UIDragEventArgs e)
{
}
}
El problema es que el destino para soltar no se muestra en el navegador como un destino para soltar:
Lo que he leído hasta ahora es que al adjuntar un controlador de eventos a una función de Blazor C # (por ejemplo, ondragstart), el comportamiento predeterminado es el conocido "e.preventDefault ()", que debería hacer que el destino de la gota sea descartable.
¿Alguien sabe cómo arreglar esto?
Sven
Respuesta aceptada
Me gustaría publicar mi solución.
Lo que he descubierto hasta ahora es que dataTransfer.setData actualmente no funciona en Blazor 0.5.1. Puedo solucionar esto guardando el elemento arrastrado en una clase de C # compartida que se inyecta como un servicio DI. El contenedor debe tener la llamada a "e.preventDefault ()" para que sea un destino válido para soltar. Aunque esto no es posible en C #, puede llamarlo fácilmente como Javascript puro:
<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">
Arrastrar y soltar funciona bastante bien con C # y muy suave sin parpadeos e interrupciones. Crearé un ejemplo de trabajo simple en los próximos días.
ACTUALIZAR:
Aquí está la demostración prometida en Github: https://github.com/sven5/Blazor/tree/master/HelloWorldDragDrop
Respuesta popular
Sí, todos sabemos que es posible llamar a funciones de Javascript desde los componentes de Blazor. Ese no era el problema. No hiciste tu código disponible. Sin embargo, si elude a Blazor y consigue que su código funcione utilizando JavaScript, este no es el camino a seguir. Esto recuerda a un usuario que intentó crear una vista de árbol en Blazor, implementando la vista de árbol únicamente mediante JavaScript. He sugerido lo contrario, y por fin logró crear la vista de árbol sin utilizar ningún JavaScript. Lo que es lo que tenemos que esforzarnos por: minimizar el uso de JavaScript y usar C # en el cliente. Consulte la vista de árbol aquí: No se detectó el enlace bidireccional de Blazor cuando se actualiza desde JS