interact.js 中文文档（调整尺寸）尺寸调节是事件有 rect 和 deltaRect 属性. rect 在每次

interact(target)
  .resizable({
    edges: {
      top   : true,       // 使用指针的坐标来调整尺寸
      left  : false,      // 禁用左边的尺寸调整
      bottom: '.resize-s',// 可调整尺寸如果鼠标指针放在该元素上
      right : handleEl    // 可调整尺寸如果元素为提供的元素
    }
  })

尺寸调节是事件有 rect 和 deltaRect 属性. rect 在每次 resizemove 事件被更新， deltaRect 则提供了变化了的值。在 resizestart 事件中, rect 和 interactable.getRect(element) 和 deltaRect 返回的元素完全相同且具有初始的属性。

尺寸调节事件属性	描述
`edges`	元素被调节的边缘（edges）
`rect`	一个具当前元素规格（dimensions）的对象
`deltaRect`	从上次事件开始到现在被调整的规格（dimensions）

调节大小选项中提供了 edges 属性，用于指定元素的边缘用于调节大小（上，左，下，右）。

<div data-x=0 data-y=0 class="resizable">
  <!-- 左上 尺寸调节 -->
  <div class="resize-top resize-left"></div>

  <!-- 右下 尺寸调节 -->
  <div class="resize-bottom resize-right"></div>
</div>

interact('.resizable')
  .resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    listeners: {
      move (event) {
        let { x, y } = event.target.dataset

        x = (parseFloat(x) || 0) + event.deltaRect.left
        y = (parseFloat(y) || 0) + event.deltaRect.top

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        })

        Object.assign(event.target.dataset, { x, y })
      }
    }
  })

记得要使用 CSS touch-action: none 来阻止浏览器平移（滚动）当用户通过触摸拖动的时候, 和 user-select: none 来禁用文本选择，和 box-sizing: border-box 如果你的元素有影响他们长度的边距（padding）和边框（borders）

如果您想要通过边角来调整尺寸，让它匹配两个相邻的边的选择器。

调节尺寸的控制器必须是该调节尺寸元素的子元素。如果你想要调节大小的控制器在目标元素外，您需要使用Interaction#start。

`invert`

interact(target).resizable({
  edges: { bottom: true, right: true },
  invert: 'reposition'
})

默认情况下，调节尺寸动作不能让 event.rect 小于 0x0。使用 invert 配置来指定目标的尺寸被调节的小于 0x0 的时候会发生什么。可选择的值如下：

'none' (默认) 会局限于调整的矩形最小为 0x0
'negate' 会允许矩形有负的宽和高
'reposition' 会保持元素的宽和高为正值，通过交换上下边缘或左右边缘

高宽比

interact(target).resizable({
  modifiers: [
    interact.modifiers.aspectRatio({
      // 确保宽一直为高的两倍
      ratio: 2,
      // 限制尺寸包含于另外一个调节器
      modifiers: [
        interact.modifiers.restrictSize({ max: 'parent' })
      ]
    })
  ],
})

interact.js 提供了 aspectRatio 配置，让您可以保留目标元素尺寸的高宽比。共有3个配置选项：

属性	类型	描述
`ratio`	number 或 'preserve'	位置尺寸的的宽高比例，'preserve' 为元素初始时的比例
`equalDelta`	boolean	为所有的边添加同样的数值代替维持宽高比
`modifiers`	array of modifiers	维持宽高比配置的数组

为了确保宽高比选项不受其他配置影响，这些配置必须在 aspectRatio.modifiers 数组配置中，不在和 aspectRatio 同级的 resize.modifiers 中。