interact.js 中文文档（安装）

TRexK
2,224 阅读2分钟

interact.js 为您的项目提供了两种免费的资源库：

  1. 方便快速启用，您可以使用名字为 interactjs 的资源库在 npm 上。 这个资源库提供此库已经打包好的所有功能
  2. 如果你想让你的 JS 保持一个比较小的大小 @interactjs/ 域（scope）让你可以选择您需要使用的功能。这些资源库是按照 ES6 模块提供的，需要您自行通过转码支持旧版浏览器。

使用 npm

# 安装打包好的全功能资源库
$ npm install --save interactjs

// es6 引入方法
import interact from 'interactjs'
// 如果使用 commonjs 或 AMD 模块
const interact = require('interactjs')

使用托管在 npm 上已经打包好的资源库， 安装此库作为一个依赖使用指令 npm install interactjs 然后在你的 JavaScript 文件中 import 或 require 这个资源库

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<!-- 或 -->
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>

你也可以使用 jsDelivr 或 unpkg 或 bootcdn 的 CDNs 通过加入 <script> 标签指向他们的服务器

interact 根据当前环境支持情况，被导出为一个 CommonJS 模块，AMD 模块，或一个全局变量

# 安装类型定义
$ npm install --save-dev @interactjs/types

如果您通过 CDN 使用该资源库并且想要 TypeScript 的定义进行开发，您可以安装 @interactjs/types 资源库作为一个开发依赖。

npm 流程

# 仅安装您需要的功能
$ npm install --save @interactjs/interact \
  @interactjs/auto-start \
  @interactjs/actions \
  @interactjs/modifiers \
  @interactjs/dev-tools

import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

interact('.item').draggable({
  listeners: {
    move (event) {
      console.log(event.pageX, event.pageY)
    }
  }
})

更详细的 JS 有效负荷，您可以安装和引用资源库中您需要的任意一个功能

资源库名称描述
@interactjs/interact(必须的) 提供 interact() 函数
@interactjs/actions拖拽, 调整大小, 手势等动作
@interactjs/auto-start开始动作通过鼠标点击，移动序列
@interactjs/modifiers指针, 约束, 等. 调节器
@interactjs/snappers提供 interact.snappers.grid() 功能
@interactjs/inertia拖拽，调整大小的惯性支持
@interactjs/reflowinteractable.reflow(action) 函数用于触发调节器和事件监听
@interactjs/dev-tools常见错误的调试器警告（在 NODE_ENV === 'production' 被剔除）和 用于优化生产资源的 babel 插件

CDN 流程

<script type="module">
import 'https://cdn.interactjs.io/v1.9.20/auto-start/index.js'
import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'
import 'https://cdn.interactjs.io/v1.9.20/actions/resize/index.js'
import 'https://cdn.interactjs.io/v1.9.20/modifiers/index.js'
import 'https://cdn.interactjs.io/v1.9.20/dev-tools/index.js'
import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'

interact('.item').draggable({
  onmove(event) {
    console.log(event.pageX,
                event.pageY)
  }
})
</script>

上面提供的资源库也可以通过 https://cdn.interactjs.io/v[VERSION]/[UNSCOPED_NAME] 获取，您可以在现代浏览器上通过 ES6 的 import 引入他们。

Ruby on Rails

Rails 5.1+ 支持 yarn, 所以你可以添加 interact.js 到您的应通过 yarn add interactjs 指令. 接着导入该资源库通过:

//= require interactjs/interact
avatar
文章
阅读
粉丝