Dragging a box

[ReLaMi96]

Hello,

I'm experimenting with boxes that can be dragged around the screen using htmx and server side position calculations sent down via the websocket extension.

I'm using mousemove event with a standard event filter so it only triggers when mouse button is pressed. It works but I have the problem of when the mouse leaves the element it obviously stops.

I was trying to cook up some solution with standard event modifier from:selector but that has the problem of moving all boxes in the screen instead only the one I want to drag.

The backend code is minimal and speed is not an issue it responds within 1 ms when running it locally. Mouse just moves too fast.

Many ideas came to my mind but most fails even before trying them on conceptual level.

Please don't tell me to just write it in javascript, I know it would be 10 lines of script and I still don't want to pollute the clean 0 script tag hypermedia with it.

Thanks in advance to anybody who bothers to answer!

[ReLaMi96]

Maybe having a "controller" div? When using mousedown on the box we want to drag, it triggers an event which would swap the controller div to have the correct target (drag box) for mousemove events. The controller can have from:body and it would only drag the box it is targetting even when the mouse leaves the box.