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

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

交互

我在 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>

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

我来解答赞 4 收藏

反馈

1 条解答

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