功能选项（Action Options)

可交互对象（Interactable）中的方法 draggable()，resizable() 和 gesturable() 被用为开启和设置对目标元素的功能。他们有一些共有的配置选项和一些特有功能的选项和事件属性。

拖动，调整尺寸和动作交互会触发一个 InteractEvent 事件，该事件有如下共有属性适用于所有功能类型：

交互事件属性	描述
target	正在进行交互的对象
interactable	正在进行交互可交互对象（Interactable）
interaction	事件所属于的交互类型
x0, y0	页面的 x 和 y 坐标在事件开始时候
clientX0, clientY0	客户端的 x 和 y 坐标在事件开始时候
dx, dy	鼠标、触摸在坐标上的变化
velocityX, velocityY	指针横向或纵向的速度
speed	指针的速度
timeStamp	事件开始时候的时间

Common Action Options

可交互对象（Interactable）的 draggable, resizable 和 gesturable 接收 true 或 false 来开启或禁用该功能，或一个具有配置属性的对象来改变某些设置。

max

max 用来限制可指向一个交互对象的交互事件的并发数量。默认情况下，任意数量的交互事件可以把同一个交互对象作为目标。

maxPerElement

默认情况下只有一个交互事件可以把同一个交互对象 + 元素的组合作为目标。如果您想要允许多个交互事件在同一个目标元素，设置该对象的 maxPerElement 属性为 >= 2。

manualStart

如果此选项被修改为 true，拖动，调节大小，和手势功能必须调用 交互事件#开始 来被启动，通常的 down, move, <action>start... 序列不会开启一个功能。查看更多在自动开始.

hold

在指针按下后延迟配置的毫秒（milliseconds），在开始交互功能。

inertia

修改拖动，调节大小的惯性设置。请看 文档/惯性。

styleCursor

如果 自动开始 功能被启动，交互时会装饰可拖动，调整尺寸元素的指针当你的指针悬浮在元素上面

interact(target).styleCursor(false)

禁用所有功能的指针装饰，设置 styleCursor 选项为 false。

cursorChecker

interact(target)
  .resizable({
    edges: { left: true, right: true },
    cursorChecker (action, interactable, element, interacting) {
      // interact.js 默认情况下使用双向的箭头 <-> ,
      // 但是我们需要特定的箭头 (<- or ->) 在每个方向上
      if (action.edges.left) { return 'w-resize'}
      if (action.edges.right) { return 'e-resize'}
    }
  })
  .draggable({
    cursorChecker () {
      // 拖动事件不设置任意指针
      return null
    }
  })

您可以使用 interact(target).styleCursor(false) 来禁用默认的指针，但是这样会禁用所有功能的指针装饰。禁用或修改每个功能的指针，您可以设置一个 cursorChecker 方法，该方法接受当前交互事件的信息，并返回当前元素 CSS 指针的值。

autoScroll

interact(element)
  .draggable({
    autoScroll: true,
  })
  .resizable({
    autoScroll: {
      container: document.body,
      margin: 50,
      distance: 5,
      interval: 10,
      speed: 300,
    }
  })

滚动一个容器（window 或一个 HTMLElement），当拖动或调整尺寸在容器边缘移动的时候。

allowFrom (把手（handle）)

<div class="movable-box">
  <div class="drag-handle" />
  Content
  <div class="resize-handle" />
</div>

interact('.movable-box')
  .draggable({
    allowFrom: '.drag-handle',
  })
  .resizable({
    allowFrom: '.resize-handle',
  })
  .pointerEvents({
    allowFrom: '*',
  })

allowFrom 让您以一个 CSS 选择器或一个元素为目标，必须以此元素的指针按下事件为目标才能让功能开启。这个选项适用于拖动，调整尺寸，手势和 pointerEvents (向下（down）, 移动（move）, 持续（hold）, 等。)。使用 allowFrom 选项，你可以分别设置每个功能的把手和每个指针事件监听器（listeners）。

allowFrom 元素必须为可交互对象（interactable）的子元素。

ignoreFrom

<div id="movable-box">
  <p class="content">可选择文本</p>
  <div no-pointer-event>不会触发点击，持续按下，等事件</div>
</div>

var movable = document.querySelector('#movable-box')

interact(movable)
  .draggable({
    ignoreFrom: '.content',
    onmove: function (event) {
      /* ... */
    }
  })
  .pointerEvents({
    ignoreFrom: '[no-pointer-event]',
  })
  .on('tap', function (event) {
  })

ignoreFrom 让您选择您目标中的元素来避免启动任意功能。这个功能可以用到在特定元素在交互时需要保持默认的行为。举个栗子：在一个文本或可编辑的对象附近拖动，用一个可拖动的元素包含并忽略（ignore）可编辑元素，在不拖动元素的情况下，您可以保留高亮文本的行为。

enabled

启用可交互对象（Interactable）的功能。如果配置对象中没有 enabled 或 属性值为这是为 true，此函数会被开启。如果 enabled 被设置为 false，这个功能会被禁用。