interact.js 中文文档（限制 Restrict）

interact.js 有3个约束配置可以通过设置 interact.modifiers 对象：

• 基于指针坐标的限制 restrict
• 基于元素矩形的限制 restrictRect
• 基于元素尺寸的限制 restrictSize (仅限于调整尺寸)
• 基于元素边缘的限制 restrictEdges (仅限于调整尺寸)

restrict()

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

restriction 属性指定了功能被限制的区域。可用值如下：

• 一个矩形对象有 top, left, bottom 和 right 或 x, y, width 和 height,
• 一个元素，该元素的边框将被用为限制区域,
• 一个函数接收 (x, y, element) 参数，返回一个矩形或一个元素
• 如下任意一个字符串:
• 'self' – 限制在目标元素的矩形
• 'parent' – 限制在元素的父级元素
• 一个 CSS 选择器。如果元素的任意一个父级匹配这个选择器，该父级的矩形将被作为限制区域。

restrictRect()

restrict 变量在默认情况下与指针坐标相关联。拖动动作的坐标，不是元素的边框，会被限制在限制的区域内。您可以使用 restrictRect 变量，这样元素的边框会在拖动的时候被考虑在内。

interact(target).draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent'
      })
    ]
  })

如果目标元素比限制区域要大，则该元素会被允许在限制区域移动。

elementRect

restrictRect 和 restrict 配置是一模一样的，但是 elementRect 选项被默认设置为有用的 { left: 0, right: 0, top: 1, bottom: 1 }。elementRect 用于当目标元素的区域边缘为阈值的时候。

从 left 和 right 属性, 0 为元素的左边缘，1 为元素的右边缘。从 top 和 bottom, 0 为远古三的上边缘， 1 为元素的下边缘。

{ top: 0.25, left: 0.25, bottom: 0.75, right: 0.75 } 的结果为四分之一的元素被允许悬浮在限制区域的边缘。

restrictSize()

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

restrictSize 让您指定元素可调整的最小和最大的尺寸。

restrictEdges()

interact(target).resizable({
    modifiers: [
      interact.modifiers.restrictEdges({
        inner: {
          left: 100, // 左边缘必须 <= 100
          right: 200, // 右边缘必须 >= 200
        },
        outer: {
          left: 0, // 左边缘必须 >= 0
          right: 300, // 右边缘必须 <= 300
        },
      })
    ]
  })

restrictEdges 让您指定元素调整尺寸时候 inner 和 outer 的大小。你可以这么认为，inner 为元素的尺寸的最小值，outer 为元素的最大值。