vue组件的interact.js

Question

到目前为止，我有两个板子，有人可以在其中拖放卡片。现在，我想尝试一下interact.js，因为它听起来像是一个很好的、维护良好的库。当我在我的项目中使用vue时，我现在对如何处理这个问题感到有点困惑。

我找到了这个博客文章这里，它使用interact.js和可刷卡，并试图使它适合我的目的。我的卡组件现在看起来如下：

<template>
  <v-card
    ripple
    class="primary"
    :id = "id"
    ref="interactElement"
  >
    <slot/>
  </v-card>
</template>

<script>
import interact from 'interactjs';

export default {
  props: ['id'],
  mounted() {
    const element = this.$refs.interactElement;
    console.log(element);
    interact(element).draggable({
      onstart: () => {
        console.log('---------start dragging');
      },
      onend: () => {
        console.log('---------end dragging');
      },
    });
  },
};
</script>

<style scoped>
  .v-card {
    height: 7rem;
    width: 7rem;
  }

  .draggable{
    touch-action: none;
    user-select: none;
  }
</style>

然而，我现在的问题是，onstart永远不会触发。我在这里做错什么了？

我还想知道，这样做更好，还是在vue (如这一个 )中测试interact.js的包装器，我不太确定这样的包装器对vue有什么好处，因为我对vue非常陌生。

谢谢！)

Answer 1

V卡中的事件处理程序似乎与interactj冲突。在div中包装v卡应该有帮助。

<template>
  <div ref="interactElement">
    <v-card
      ripple
      class="primary"
      :id = "id"
    >
      <slot/>
    </v-card>
  </div>
</template>

Answer 2

object方法需要另一个vue方法覆盖名为Created ()的属性(与挂载对象相同)