question

TomazKoritnik-9648 avatar image
0 Votes"
TomazKoritnik-9648 asked Bruce-SqlWork answered

Blazor mouse events and mouse capture

I'd like to create a panel with movable html elements using Blazor WebAssembly (for something similar like a workflow editor). Currently I have a <div> with position:absolute style as a movable object where I handle mouse events on it. It works, but as soon as the mouse goes out of this div or out of the browser window, events are not sent to the div anymore. I need to capture the mouse somehow so that events are sent to this div in all cases, even if mouse cursor is outside the browser window. How can I accomplish this? Maybe I need to handle the events on a document-level somehow, maybe using JS interop, I don't know.

dotnet-aspnet-core-blazor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered

As blazor always depends on json interop for events even for the builtin ones there is nothing wrong with your approach. You could make a generic blazor component for capturing window or root dom events.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

TomazKoritnik-9648 avatar image
0 Votes"
TomazKoritnik-9648 answered

I actually found a way using JSInterop. I have defined a custom JavaScript function in index.html that calls Element.setPointerCapture(). Is this the only way that this could be accomplished?

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.