With the restrict variant, restricting is by default relative to the pointer coordinates so that the action coordinates, not the element’s dimensions, will be kept within the restriction area. The elementRect option changes this so that the element’s edges are considered while dragging.

For the left and right properties, 0 means the left edge of the element and 1 means the right edge. For top and bottom, 0 means the top edge of the element and 1 means the bottom.

{ top: 0.25, left: 0.25, bottom: 0.75, right: 0.75 } would result in a quarter of the element being allowed to hang over the restriction edges.

The endOnly option is used to restrict just before the end of a drag or resize. Before the end event is fired, an extra <action>move event is restricted and fired.

If inertia is enabled and endOnly is set to true then the pointer will follow a curve to the restricted coordinates.

The restriction value specifies the area that the action will be confined to. The value can be: - a rect object with top, left, bottom and right or x, y, width and height, - an element whose dimensions will be used as the restriction area, - a function which takes (x, y, element) and returns a rect or an element one of these strings: 'self' – restrict to the target element’s rect 'parent' – restrict to the rect of the element’s parentNode or a CSS selector string – if one of the parents of the target element matches this selector, it’s rect will be used as the restriction area.