Estoy tratando de utilizar JS arrastrar y soltar en Blazor, que funciona bien en general, pero quiero configurar una imagen de arrastre personalizada durante el evento ondragstart . En general, mi código se ve así:
<div class="some-draggable-container" draggable="true" ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)')" > </div> Element.dragStartHandler = function(event, imgSrcBase64) { var img = new Image(); img.src = imgSrcBase64; event.dataTransfer.setDragImage(img, 0, 0); } El problema que se me ocurre es que necesito llamar a una función .Net después de configurar la imagen de arrastre y no puedo encontrar una manera de pasar la DotNetObjectReference necesaria a través de la parte JS.
Simplemente pasar el objectRef recién creado a la llamada de evento JS conduce a un Unexpected end of input .
ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(DotNetObjectReference.Create(this)))" Además, usar JsonSerializer no funciona. Seguramente serializa el objeto y JS puede deserializarlo, pero como era de esperar, los métodos DotNet.invokeMethod() no están presentes.
ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(JsonSerializer.Serialize(DotNetObjectReference.Create(this))))" Utilizar el evento Blazor y manejarlo completamente en .Net no ofrece la posibilidad de configurar la imagen de arrastre porque los DragEventArgs pasados no son totalmente compatibles con el de JS.
Pasar los argumentos del evento a través IJSRuntime a una función JS genera errores porque simplemente no es lo mismo que el evento JS nativo, por lo que al menos falta el método setDragImage() .
¿Hay alguna manera de hacer funcionar esto? No quiero hacer malabares con JS-to-static-.Net llamadas y guids o ese tipo de solución.
Editar
Como @MisterMagoo mencionó en un comentario ahora eliminado: sería una forma suficiente de pasar DotNetObjectReference durante el primer ciclo de OnAfterRender a la parte JS, así como un guid estático y referenciarlo más tarde si es necesario.
El problema con eso es que, en mi caso, la lista puede tener fácilmente entre 50 y 100 entradas y no sé cómo afectaría esto al rendimiento y la memoria. Entonces, en casos pequeños, esto estaría bien, pero en mi caso probablemente no.
Editar
Entonces, para aclarar la razón por la que elegí resolver este problema en primer lugar: sé que podría resolver este problema puramente en Blazor simplemente creando una imagen que sigue al cursor. Pero a través de JS ya existe una forma de configurar la imagen de arrastre que maneja el propio navegador en términos de posicionamiento y movimiento de la imagen. Así que quería ir por la ruta más eficiente en cuanto al rendimiento en lugar de utilizar completamente Blazor porque tenemos una ventana de rendimiento estrecha para nuestra aplicación.
esto es solo un psuedo código incorrecto que estoy escribiendo en el bloc de notas desde la memoria y el código apunta en un bucle, pero debería darle una idea de cómo llamar a javascript y luego enviar los datos a C #
en un archivo js:
window.myBlazor = { doSomething: function(cSharpObjectReference, val1, val2) // some js stuff happens cSharpObjectReference.Notify(someData)}; en un archivo cs:
public static class MyInterops { private static readonly string _BaseObjectContainer = "myBlazor"; public static async Task DoSomethingCs(IJSRuntime jsRuntime, ObjectJavaScriptShouldUse cSharp, MyModel model) { await jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.doSomething", DotNetObjectReference.Create(cSharp), model.Val1, model.Val2); } } public class ObjectJavaScriptShouldUse { private readonly IJSRuntime _jsRuntime; [JSInvokable] public async ValueTask Notify(MouseEvent eventArgs) { await MyInterops.DoSomethingCs(_jsRuntime, this, eventArgs); //i accidentally pointed these calls in recursion, but you get the idea } }