NAV Navbar
version 1.4.0-rc.2

Restrict

interact.js has 3 restriction modifiers:

interact.modifiers.restrict()

interact(target)
  .draggable({
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'parent',
        endOnly: true
      })
    ]
  })

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

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({
    modifiers: [
      interact.modifiers.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.

interact.modifiers.restrictSize()

interact(target).resizable({
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 100 },
        max: { width: 500, height: 500 },
      })
    ]
  })

restrictSize lets you specify the minimum and maximum dimensions that the target element must have when resizing.

interact.modifiers.restrictEdges()

interact(target).resizable({
    modifiers: [
      interact.modifiers.restrictEdges({
        inner: {
          left: 100, // the left edge must be <= 100
          right: 200, // the right edge must be >= 200
        },
        outer: {
          left: 0, // the left edge must be >= 0
          right: 300, // the right edge must be <= 300
        },
      })
    ]
  })

restrictEdges lets you specify inner and outer dimensions that the target element must have when resizing. You can think of inner as setting the minimum size of the element and outer as the maximum size.