interact.js：一个不碰 DOM 的拖拽库，但它的 API 设计值得你花时间评估

它解决的是拖拽库的哪些老问题

拖拽和缩放在 Web 上是个常见需求，但原生实现往往要处理一堆边缘情况：鼠标和触摸事件的差异、元素在拖拽过程中的重绘、多指手势的坐标计算。interact.js 把这些封装成统一的 API，并额外提供惯性和吸附，让交互手感接近原生应用。它面向的是那些需要精细控制交互行为的开发者，比如画布编辑器、看板应用或数据可视化工具。和很多拖拽库不同，interact.js 明确承诺不修改 DOM，除了改变光标样式，这个特性对依赖虚拟 DOM 的框架来说是个加分项，因为拖拽过程不会引发意外的样式或结构变更。

核心机制：事件监听与 modifier 链

interact.js 的工作方式不是直接操作元素位置，而是通过监听交互事件并让开发者自己决定如何响应。README 中的示例展示了这一点：你调用 interact() 选择目标元素，然后配置 draggable，其中 modifiers 数组可以包含 snap 这样的修正器。当拖拽发生时，listeners.move 会收到一个 event 对象，里面包含 dx、dy 等位移数据，开发者用这些数据去更新画布或元素。这意味着库本身不替你移动元素，它只告诉你发生了什么。这种设计的优点是你有完全的控制权，但缺点是你得自己写位置更新的逻辑。snap 和 inertia 也是通过 modifier 系统实现的，它们会在事件触发前修改坐标值，所以你需要理解这个管线的顺序，否则吸附和惯性可能不符合预期。

上手：从 npm 到第一行拖拽代码

安装很简单，npm install interactjs 就能拿到包，CDN 也提供了 dist/interact.min.js 的脚本引用。TypeScript 用户不用额外装类型，因为包本身内置了定义，但如果你只需要类型，可以单独安装 @interactjs/types。一个最小示例大概是这样：先用 interact('.drag-target') 选择目标，然后调用 .draggable({ listeners: { move: function (event) { event.target.style.transform = 'translate(' + event.dx + 'px, ' + event.dy + 'px)'; } } })。注意，这里你必须手动更新样式，库不会自动做。官方文档在 interactjs.io/docs，但 README 里的示例只展示了部分 API，实际使用中你可能需要查文档来了解 modifiers 的完整配置，比如 snap 的 targets 可以是一个网格函数，也可以自定义函数。

限制：不是所有拖拽需求都适合它

interact.js 的强项是灵活性和底层控制，但这意味着它不适合那些想快速实现拖拽排序的场景。它没有内置的排序逻辑，你需要自己结合 DOM 操作来实现列表重排。另一个限制是它对 IE9 的支持，虽然 README 声称支持 IE9+，但现代浏览器特性如 Pointer Events 在 IE9 上可能不可用，你需要检查 polyfill 或降级方案。此外，由于库不修改 DOM，它也不会处理元素在拖拽中的碰撞检测或边界限制，这些都需要你自己编写。如果你需要的是开箱即用的拖拽排序，这个库会让你写不少额外代码。

替代方案：SortableJS 和原生 HTML5 拖放

如果你主要需要拖拽排序，SortableJS 是更直接的选择，它专注于列表排序，内置了动画和触摸支持，API 也更简单。而 interact.js 则是一个通用交互库，排序只是它能力的一小部分。另一个替代是原生 HTML5 Drag and Drop API，它不需要任何库，但触摸设备支持差，且无法实现惯性或复杂的吸附。interact.js 的价值在于它把鼠标和触摸统一处理，并提供 modifier 系统，这是原生 API 做不到的。所以选择的关键在于你的需求复杂度：简单排序用 SortableJS，复杂手势用 interact.js，原生 API 只适合桌面端简单拖拽。

维护与许可证：MIT 的宽松与社区现状

interact.js 使用 MIT 许可证，这意味着你可以自由使用和修改，甚至商用，只要保留版权声明。项目用 TypeScript 编写，类型定义是内置的，这对 TypeScript 用户是个好消息。但仓库的最近发布信息没有提供，README 也没有给出活跃的发布节奏，这让人担心维护状况。GitHub 上有 Gitter 聊天室和 CI 工作流，说明项目在持续开发，但你需要自行检查 CHANGELOG 来确认最近的更新内容。如果项目长期不更新，浏览器新特性可能不会及时支持，但核心功能在旧浏览器上应该稳定。采用前，建议查看 GitHub 上的 issues 和 PR 状态，评估社区活跃度。

编辑结论

interact.js 适合需要精细控制拖拽、缩放和多指手势的开发者，尤其是那些必须在 IE9 或 SVG 元素上实现交互的项目。它不修改 DOM 的特点在依赖 DOM 状态的框架中可能很有价值，但你必须接受其 API 的学习曲线。不建议在不熟悉其事件模型和 modifier 系统的场景下直接使用，否则容易在调试惯性或吸附行为时陷入困境。采用前，先确认你的目标浏览器是否在官方支持列表内，并仔细阅读 http://interactjs.io/docs 中的 modifiers 和 actions 部分，特别是 snap 和 inertia 的配置方式。如果你只需要简单的拖拽排序，interact.js 可能过重，考虑更轻量的替代方案。最终，这个库的维护活跃度和文档完整性是决定长期使用的关键，建议检查 GitHub 上的 CHANGELOG 和最近的提交记录。

官方来源

1. Official documentation
2. Official README
3. Project repository