interact.js 中文文档（吸附）snapEdges 和 snapSize 查不多, 但是让你设置目标元素边缘的位

interact.js 有3个吸附配置可用在 interact.modifiers 对象中：

基于指针坐标的 snap 更好的适用于拖动功能，
snapSize 只能在调整尺寸功能使用，并让您为目标元素的尺寸设置目标元素，
snapEdges 和 snapSize 查不多, 但是让你设置目标元素边缘的位置。

当创建吸附配置是会有一个 targets 数组。功能事件会被吸附到最近的范围内数组中最近的元素。

`snap()`

snap 配置修改指针的坐标为指定目标当他们在范围内。

const mySnap = interact.modifiers.snap({
  targets: [
    { x: 200, y: 200 },
    { x: 250, y: 350 }
  ]
})

当拖动时使用 snap 配置，拖动事件监听器收到的指针左边会是修改过后的目标来和吸附对象接触。这个选项也可以用于可调节尺寸对象，但是没准不会产出很直观的结果。

snap 目标有 x 和 y 数字类型属性和一个可选的 range 数字类型属性。

`relativePoints`

interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [ { x: 300, y: 300 } ],
      relativePoints: [
        { x: 0  , y: 0   },   // 吸附元素的左边-右边
        { x: 0.5, y: 0.5 },   // 中间
        { x: 1  , y: 1   }    // 底部-右边
      ]
    })
  ]
})

您可以使用 relativePoints数组，来为 snap (不是 snapSize 或 snapEdges) 指定元素上相对的点在吸附的时候。每个数组中的对象是一个对象具有 x 和 y 属性标量，用于指定吸附相对的元素位置。如果没有提供 relativePoints 数组或数组为空，吸附将相对于指针的坐标（默认）。

当吸附计算完成后，共有 targets.length * max( relativePoints.length, 1 ) 个吸附目标。根据每个在 relativePoint 的坐标，吸附方法会被调用多次。

`offset`

interact(element1).draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [ { x: 300, y: 300 } ],
      offset: { x: 20, y: 20 }
    })
  ]
})

interact(element2).resizable({
  modifiers: [
    interact.modifiers.snap({
      targets: [ { x: 300, y: 300 } ],
      offset: 'startCoords'
    })
  ]
})

offset 选项让你移动一个snap配置目标元素的坐标系。可用的值如下:

一个有 x 和 y 属性的对象,
'startCoords' 使用在功能开始时的 pageX 和 pageY，
'self' 使用目标圆的做少坐标,
'parent' 使用父级元素的左上坐标。

`snapSize()`

interact(target).resizable({
  edges: { top: true, left: true },
  modifiers: [
    interact.modifiers.snapSize({
      targets: [
        { width: 100 },
        interact.snappers.grid({ width: 100, height: 100 })
      ]
    })
  ]
})

snapSize 配置吸附目标元素的 dimensions 当调整尺寸的时候。snapSize 是一个有 x 和 y 的数字属性，或 width 和 height 数字属性，还有一个可选的 range。他的目标有 x 和 y 数字属性或 width 和 height 数字属性和一个可选的 range。

`snapEdges()`

interact(target).resizable({
  edges: { top: true, left: true },
  modifiers: [
    interact.modifiers.snapEdges({
      targets: [
        interact.snappers.grid({ top: 100, left: 100 })
      ]
    })
  ]
})

snapSize 配置吸附元素的 edges 当调整大小的时候。他的目标有 x 或 y 数字属性分别来来吸附左边右边和上边下边边缘，top, left, width 和 height 数字属性来吸附每个边和一个可选的 range。

`targets` option

功能事件的坐标被与吸附配置提供的坐标进行比较，如果多个目标同时在范围内，最靠近的目标会被用。

interact.modifiers.snap({
  targets: [
    function (
      // 页面 x 和 y 的坐标,
      x, y,
      // 档期那的交互事件
      interaction,
      // 相对点位（relativePoint）的补偿信息
      { x: offsetX, y: offsetY, relativePoint, index: relativePointIndex },
      // 在 options.target 数组中，此方法的索引
      index
    ) {
      return {
        x: x,
        y: (75 + 50 * Math.sin(x * 0.04)),
        range: 40,
      }
    }
  ]
})

您可以在 targets 数组中使用方法。如果一个吸附目标为一个函数，他会被调用，使用事件中的 x 和 y 的坐标为前两个参数，交互事件作为第三个参数。返回值会被用为一个目标元素。

如果一个目标元素忽略一个坐标轴或者边缘属性，相对的轴则不会被改变。举个例子，如果一个目标被定义为 { y: 100, range: Infinity }，则吸附后的移动将为水平的 (100, pointerEventPageX)。

Snap grids

var gridTarget = interact.snappers.grid({
  // 可以为一对 x 和 y, left 和 top, right 和 bottom, 或 width 和 height
  x: 50,
  y: 50,

  // 可选的
  range: 10,

  // 可选的
  offset: { x: 5, y: 10 },

  // 可选的
  limits: {
    top: 0,
    left: 0,
    bottom: 500,
    height: 500
  }
})

interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({ targets: [gridTarget] })
  ]
})

您可以使用 interact.snappers.grid() 方法来创建一个目标对象来吸附于一个网格。这个方法接受一个描述网格的对象并返回一个吸附于网格角落的函数。

网格的属性如下:

x, y: 水平和数值网格线之间的距离。
range (可选的): 网格角落的距离，指针坐标将被吸附。
offset (可选的): 有 x 和 y 属性的对象来补偿网格线
limits (可选的): 有 top, left, bottom 和 right 属性的对象来设置网格的外边框

`range`

interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [
        { x: 20, y: 450, range: 50 }
        { x: 10, y: 0 /* 用下面默认范围 */ }
      ],
      range: 300 // 用于没有指定范围的目标
    })
  ]
})

一个范围可以指定在吸附配置选项，没有目标元素可以单独设置范围。可吸附对象的 range 为指针的到目标元素坐标的距离来实现一个吸附。

例如： inRange = distance <= range。

Event snap info

interact(target).draggable({
  modifiers: [
    interact.modifiers.snap({ targets: [(x, y) => ({ x: x + 20 })] }),
  ],
  listeners: {
    move (event) {
      console.log(event.modifiers[0].target.source)
    }
  }
})

InteractEvent.modifiers 将为一个数组具有该功能配置后的信息。吸附配置提供一个对象具有最靠近的目标计算后的信息。

属性	类型	描述
`x` 和 `y`	number	由原始，补偿，相对点位吸附处理过后的坐标
`source`	target object or function	目标对象或函数在目标选项中
`index`	number	目标数组中的索引
`range`	number	目标的范围
`offset`	object	应用于来源的补偿

interact.js 中文文档（吸附）

snap()

relativePoints

offset

snapSize()

snapEdges()

targets option