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 为元素的最大值。