interact.js 拖拽在 Vue 中无法触发 onmove 事件？

Dev · 爱慧提问于 2026-02-26 16:07:22 阅读 39

交互

我在 Vue 项目里用 interact.js 做拖拽，但拖动时 onmove 回调完全没反应，是哪配置错了？

已经按文档加了 draggable，也绑定了 listeners，但就是不进 onmove。试过把 interact 放到 mounted 里初始化，还是不行。

<template>
  <div ref="dragBox" style="width:100px;height:100px;background:red;"></div>
</template>

<script>
import interact from 'interactjs'

export default {
  mounted() {
    interact(this.$refs.dragBox).draggable({
      listeners: {
        move: (event) => console.log('moving', event)
      }
    })
  }
}
</script>

交互开发拖拽功能用户交互

我来解答赞 8 收藏

反馈

2 条解答

Mr-馨然 Lv1

问题在于事件名称写错了。interact.js 的 draggable 事件名不是 move，而是 dragmove。

改成这样就行：

import interact from 'interactjs'



export default {

  mounted() {

    interact(this.$refs.dragBox).draggable({

      listeners: {

        dragmove: (event) => console.log('moving', event)

      }

    })

  }

}

或者用 start 和 end 也是同理，要加 drag 前缀。

另外提醒一下，如果你的项目跑在 SSR 环境下（比如 Nuxt），这种直接操作 DOM 的代码最好套个 if (process.client) 判断，避免服务端渲染时报错。

2026-03-11 13:03

Tr° 保霞 Lv1

你漏了 interact 的全局配置，Vue 里得先 interact.setDefaults({ inertia: true })，或者更简单直接加 enabled: true 到 draggable 配置里：

<script>

import interact from 'interactjs'



export default {

  mounted() {

    interact(this.$refs.dragBox).draggable({

      enabled: true,

      listeners: {

        move: (event) => console.log('moving', event)

      }

    })

  }

}

</script>

2026-02-26 16:14