NAV Navbar

Restrict

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

Drags, resizes and gestures can be restricted to a certain area. By default, restricting is relative to the pointer coordinates – the action coordinates, not the element’s dimensions, will be kept within the restriction area. You can change this by setting the elementRect.

restriction

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

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

elementRect

interact(target)
  .draggable({
    restrict: {
      elementRect: { left: 0, right: 0, top: 1, bottom: 1 }
    }
  })
  .resizable({
    restrict: {
      elementRect: { left: 1, right: 1, 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

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.