interact.js 中文文档(惯性&回流)

570 阅读2分钟

惯性

interact(target)
  .draggable({
    inertia: true
  })
  .resizable({
    inertia: {
      resistance: 30,
      minSpeed: 200,
      endSpeed: 100
    }
  })

惯性允许拖动和调整尺寸功能够继续在用户以足够快的速度松开鼠标指针。所需要的开启,结束速度和阻力可以随意的被配置通过下面的设置。

如果一个功能在没有惯性的情况下结束,但是被打断的或受限的使用 endOnly 选项,则坐标会从结束坐标被篡改为打断的/受限的的坐标.

可选项

  • resistance 阻力是一个大于0的数字。阻力设置动作减速的比例。更大的值减速的越快。

  • endSpeed 结束速度是一个速度(像素每秒)决定了是否停止惯性。

  • allowResume 允许继续是一个 boolean 布尔值决定了用户是否可以恢复一个动作当该动作在惯性阶段。

  • smoothEndDuration 平滑结束持续时间是一段毫秒级的持续时间,来修改真实的坐标变为 endOnly 修改的坐标。设置此值为 0 来禁用 endOnly 打断或限制结束动画。

当一个惯性被继续的时候,开始坐标和结束坐标的区别在于目标元素的左上角,不会被反应在下一个 {action}move 事件中。取而代之,一个 {action}resume 事件在惯性期间指针再次点下时被触发,在 {action}move 事件之前。如果您需要坐标上的变化,您可以通过监听 {action}move 事件并进行反馈。

回流

const interactable = interact(target)
const drag = { name: drag, axis: 'x' }
const resize = {
  name: resize,
  edges: { left: true, bottom: true }
}

interactable.reflow(drag)
interactable.reflow(resize)

回流方法允许您触发一个 开始 -> 移动 -> 结束 队列,此队列执行所有的修改器和落入计算,等。如果您的可交互对象(interactable)是一个 CSS 选择器,一个交互会被运行在每个匹配的元素。如果元素有惯性,endOnly 配置和 smoothEndDuration,此交互被异步运行。回流方法会返回一个 Promise 对象,在所有交互事件执行完成之后会完成。