NAV Navbar

Restrict

interact(target)
  .draggable({
    restrict: { /* restrict options */ }
  })
  .resizable({
    restrictSize: { /* restrict options */ }
    restrictEdges: { /* restrict options */ }
  });
  .gesturable({
    restrict: { /* restrict options */ }
  });

Drags, resizes and gestures can be restricted to a certain areas using one of 3 variations of action restriction: - pointer coordinate-based restrict - element size-based restrictSize (resize only) - and element edge-based restrictEdges (resize only)

restriction

The restriction value specifies the area that the action will be confined to. The value can be:

interact(target)
  .draggable({
    restrict: {
      restriction: 'parent',
    }
  })
  .resizable({
    restrictEdges: {
      restriction: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
      }
    }
  })

elementRect

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.

interact(target)
  .draggable({
    restrict: {
      elementRect: { left: 0, right: 0, top: 1, bottom: 1 }
    }
  })

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.

endOnly

interact(target)
  .resizable({
    restrictSize: {
      restriction: 'parent',
      endOnly: true,
    }
  })

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.