interact.js 中文文档（配置 Modifiers）

// 创建一个限制配置来阻止元素拖动到父元素外
const restrictToParent = interact.modifiers.restrict({
  restriction: 'parent',
  elementRect: { left: 0, right: 0, top: 1, bottom: 1 },
})

// 创建一个吸附配置来修改事件坐标为最近网格的角落
const snap100x100 = interact.modifiers.snap({
  targets: [interact.snappers.grid({ x: 100, y: 100 })],
  relativePoints: [{ x: 0.5, y: 0.5 }],
}),

interact(target)
  .draggable({
    // 使范围限制生，吸附配置生效对拖动功能生效
    modifiers: [restrictToParent, snap100x100],
  })
  .on('dragmove', event => console.log(event.pageX, event.pageY))

interact 的 modifiers 让你改变功能事件的坐标。配置对象传入功能方法中可以有一个 modifiers 数组，会被该功能类型的事件实现。数组中的配置按照顺序生效，他们的顺序也许会影响最终结果。

const snapAtEnd = interact.modifiers.snap({
  endOnly: true,
  targets: [/* ... */],
})

在一个 endOnly 选项被设置为 true 为交互中，配置只能在最后的移动事件中生效。当使用 endOnly 配置在一个开启 inertia 惯性的功能，事件坐标会平缓的移动从开始的坐标到被修改的坐标。

interact.js 提供了集中不同的配置类型 吸附 和 限制 元素.