The way this code works, the drag motion updates some state. I can apply constraints when setting the state. Then the state drives the redisplay. I wanted to s

The way this code works, the drag motion updates some state. I can apply constraints when setting the state. Then the state drives the redisplay. I wanted to separate the constraint system from the event handling system. Libraries like jquery-ui tie them together, so the event handling system has to know all the possible constraints. In jquery-ui, they support bounding box, axis, square grid, snapping to dom elements. But what if I wanted snapping to a hex grid, or a logarithmic scale grid, or a bounding circle? It's not supported. In the code you'll see "state.pos = …". That's where the state is set. For constraints, I put "pos" behind a setter. Then the setter can apply the constraint, without the drag event handling code having to know what type of constraints are needed. I should update the page to show some examples of constraints. I completely forgot to mention this aspect of the code recipe. (Thanks!) I have some older examples of constraints at https://www.redblobgames.com/articles/curved-paths/making-of.html https://www.redblobgames.com/articles/curved-paths/making-of... and a prevent-collision example at https://redblobgames.github.io/circular-obstacle-pathfinding/ https://redblobgames.github.io/circular-obstacle-pathfinding... . However I haven't tried drag-to-reorder or animated drop targets.