¿Cómo implementar arrastrar y soltar en Blazor?

blazor c# html

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:

<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">

El código Blazor C #:

<div class="col" ondragstart="@AllowDragOver" ondrop="@Add">

}

El problema es que el destino para soltar no se muestra en el navegador como un destino para soltar:

Arrastrar Drop en el navegador

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();
}

}



Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
¿Es esto KB legal? Sí, aprende por qué
Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
¿Es esto KB legal? Sí, aprende por qué