I don't know how to do that with the built-in drag-and-drop API. With mouse or pointer events:

1. When I get the event, I update the underlying state, but leave the DOM element alone.

2. I can apply constraints to that state. To restrict dragging to the x-axis, I would never change y.

3. I use the state to drive the redisplay of the DOM element.

Some examples of constraints I want: https://www.redblobgames.com/articles/curved-paths/making-of...

I think jQuery's drag and drop API is using the mouse events directly and not using the built-in dragstart/etc., and that's why they can apply constraints.