interact.js 中文文档（介绍）

什么是 interact.js?

interact.js 是一个 JavaScript 资源库提供拖，放，调整尺寸和多点触摸手势功能用于现代浏览器。它的免费和开源版本提供了强大的配置像惯性和指针、约束调整器。

interact.js Pro 使用更多的调节器扩展了该开源功能，更多复杂的内置交互，框架集成，和高级开发工具，用于节省您的事件和劳动力。

该资源库聚焦于 持续呈现指针输入事件 在不同的浏览器和设备，提供方便的方法 在用户鼠标指针没有移动的时候假装在移动 (吸附, 惯性, 等)。

interact 函数接收一个元素或者 CSS 选择器字符串，并返回一个 Interactable 拥有很多方法的对象用于配置动作和事件监听器。指针交互队列按下 -> 移动 -> 弹起，启动拖，调整尺寸，或手势动作。通过添加事件监听器方法，您可以为 InteractEvent 事件提供反馈，该事件包含了指针坐标，速度，元素大小等。

请注意在默认情况下 interact.js 不会替您移动元素。通过您自己的事件监听器，装饰（Styling）一个元素，让该元素跟随拖动的过程移动。这样，您可以控制发生的任何事情。

Getting Started

安装之后, 用于建立您对象和交互的基础步骤如下：

1. 创建一个 Interactable 对象.
2. 打开动作选项，然后添加编辑器，惯性，等.
3. 为视觉反馈和更新您应用的状态，添加事件监听器。

举个栗子, 以下是一些简单的代码 简单的滑动输入事件:

// 步骤 1
const slider = interact('.slider')    // 具有 "slider" 类（class）的目标元素

slider
  // 步骤 2
  .draggable({                        // 让该元素触发拖动事件
    origin: 'self',                   // (0, 0) 将作为该元素的上-左
    inertia: true,                    // 开启惯性移动如果该元素被甩出
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'self'           // 保留拖动的坐标在该元素内
      })
    ]
  })
  // 步骤 3
  .on('dragmove', function (event) {  // 每次拖动事件触发后，调用这个监听器
    const sliderWidth = interact.getElementRect(event.target.parentNode).width
    const value = event.pageX / sliderWidth

    event.target.style.paddingLeft = (value * 100) + '%'
    event.target.setAttribute('data-value', value.toFixed(2))
  })

动作

interact.js 支持3种被指针触发的动作类型， 按下 → 移用 → 弹起 队列:

• 拖拽 用于移动元素或在画布上画元素。 这个可以和 落入区（dropzone） 结合来实现拖拽应用。
• 调节尺寸 用于观测元素的尺寸和位置，当指针用于移动元素中一个或两个的边缘
• 手势 用于双指手势包括角度，比例，等，数据。

Pro 版本在拖（draggable）动作提供 排序和交换 功能用于拖或放重新排列一个列表的元素。