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 popular
IMPORTANTE: Creo que UIDragEventArgs no es compatible en la actualidad ...
... "que el comportamiento predeterminado es el conocido" e.preventDefault () "que debería hacer que el destino de la gota sea dropable" ==> No estoy seguro de eso.
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();
}
}