用interact.js实现拖拽缩放功能的实战经验与踩坑记录

为什么我要对比这几套方案？

最近在开发一个交互比较复杂的拖拽组件，需求是让用户能自由调整元素位置、缩放大小，还得支持多点触控。这种场景下，interact.js 是我的首选库之一。不过，为了保险起见，我还是决定横向对比一下几个类似的方案：原生 HTML5 Drag and Drop API、Hammer.js 和 interact.js。

为啥要对比这仨？因为它们都能实现类似的功能，但各有各的坑。我踩过不少坑，也折腾了不少时间，今天就把这些经验分享出来，希望对你有帮助。

核心代码就这几行

先上代码，看看这几个方案的基础用法。

HTML5 Drag and Drop

<div id="draggable" draggable="true">拖我试试</div>

const draggable = document.getElementById('draggable');
draggable.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', '拖拽中');
});
draggable.addEventListener('dragend', () => {
  console.log('拖拽结束');
});

Hammer.js

<div id="hammer-box">用手指滑动或缩放我</div>

const hammerBox = document.getElementById('hammer-box');
const hammer = new Hammer(hammerBox);
hammer.get('pinch').set({ enable: true });
hammer.on('pan', (event) => {
  hammerBox.style.transform = translate(${event.deltaX}px, ${event.deltaY}px);
});
hammer.on('pinch', (event) => {
  hammerBox.style.transform = scale(${event.scale});
});

interact.js

<div id="interact-box">拖拽和缩放都行</div>

interact('#interact-box')
  .draggable({
    listeners: {
      move(event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
        target.style.transform = translate(${x}px, ${y}px);
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    }
  })
  .gesturable({
    listeners: {
      move(event) {
        const target = event.target;
        let scale = parseFloat(target.getAttribute('data-scale') || 1);
        scale *= event.ds;
        target.style.transform = scale(${scale});
        target.setAttribute('data-scale', scale);
      }
    }
  });

谁更灵活？谁更省事？

从代码来看，HTML5 Drag and Drop 简单得让人怀疑人生，几行代码就能搞定拖拽功能。但问题是，这个API太老旧了，很多地方都不够灵活。比如它只能处理拖拽事件，没法直接支持缩放、旋转等复杂操作。而且在移动端的支持几乎等于没有，想兼容手机的话，还是别考虑它了。

Hammer.js 的确是个好工具，尤其是在移动端的手势支持上特别强。像 pinch（捏合）、swipe（滑动）这些手势操作都很方便。但它的缺点也很明显：对PC端的支持不够友好，尤其是鼠标事件需要额外配置，才能勉强跑起来。另外，Hammer.js 的社区活跃度已经不如从前，文档更新也不及时，这让我有点担心长期维护的问题。

interact.js 是我最喜欢的方案，原因很简单：它既能在PC端流畅运行，也能很好地支持移动端。它的API设计得很直观，拖拽、缩放、旋转都可以轻松实现。更重要的是，它的扩展性很强，你可以通过自定义行为来满足各种奇怪的需求。唯一需要注意的是，它的体积比其他两个大一些，但这点代价对我来说完全可以接受。

性能对比：差距比我想象的大

在实际项目中，我测试了一下这三个方案的性能表现，结果有点出乎意料。HTML5 Drag and Drop 的性能确实不错，毕竟它是原生的，浏览器优化得很好。但在复杂的交互场景下，它的局限性太大，基本没啥竞争力。

Hammer.js 在移动端的表现还算可以，但在PC端就不行了。特别是当我在一个页面里同时绑定了多个手势事件时，性能下降很明显。虽然可以通过节流（throttle）和防抖（debounce）来优化，但这无形中增加了开发成本。

interact.js 的性能表现是最稳定的，无论是PC端还是移动端，它的响应速度都很快。即使是在复杂的交互场景下，也没有出现明显的卡顿。这一点让我非常满意。

踩坑提醒：这三点一定注意

1. 如果你选择了 Hammer.js，记得手动启用 pinch 手势：hammer.get('pinch').set({ enable: true }); 我当时忘记这一步，调试了半天才发现问题。

2. 使用 interact.js 时，记得给元素设置 touch-action: none;，否则可能会触发浏览器默认的滚动行为。这个坑我踩了好几次。

3. HTML5 Drag and Drop 在移动端基本废了，如果你的项目需要兼容手机，请直接放弃这个方案。

我的选型逻辑

总结一下，我的选型思路其实很简单：看场景，我一般选 interact.js。如果你的需求是纯PC端的简单拖拽，HTML5 Drag and Drop 就够用了。如果你专注于移动端的手势操作，Hammer.js 也可以考虑。但如果像我一样，需要一套既能支持PC端又能兼容移动端的完整解决方案，interact.js 绝对是最佳选择。

当然，每个项目都有自己的特殊需求，我的经验未必适合所有人。以上是我个人对这个交互场景的完整讲解，有更优的实现方式欢迎评论区交流。