Constrain movement along an axis:

I can be dragged only vertically

I can be dragged only horizontally

Or to within another DOM element:

I'm contained within the box

I'm contained within my parent

Constrain the movement of each draggable by defining the boundaries of the draggable area. The containment option allows you to specify any element to use as a containing box; you can pass any selector or the string "parent".

The draggable element can also be constrained with custom logic inside a drag event handler. Modifying the ui.position object's left and/or top properties will change where the element will be positioned. In this example, we're forcing the top or left to always be the same as where it started, resulting in the element being confined to a specific axis.