Lock mouse position when dragging element with jQuery UI sortable

Question

I use jQuery UI sortable plugin to let users reorder divs with in a container.

In the plugin's settings i set axis:"y" to constrain the dragging movement to a vertical movement only.

When the user drags the div the mouse position is staying the same (relative to the dragged div ) vertically but horizontally the mouse moves freely and (to my opinion) it gives a less "firm" / "stable" ui experience and i want the mouse to stay on the same position (relative to the div ) while dragging.

Any ideas how to do that?

Demo

Note: when the sorting isn't constrain to to a vertical movement only the mouse is locked to the first position natively.

Answer 1

controlling mouse position with JS is tough to do and not advisable. Still, if you want to do this you should take a look at the Pointer Lock API, although I am not sure it will accomplish what you're looking for.

Kind regards,