标签: interactjs

我正在开发具有拖放功能的网络应用程序。到目前为止，我使用的是基本的 HTML5 拖动，但现在我转而使用库interact.js。

我不知道我的问题是特定于这个库还是更一般的类型：拖放时的事件通常会触发多次（如果我没看错，它似乎也总是恰好 4 次，但不能保证那）。

我也在使用 Vue.js，这是我的代码：

<template>
    <v-card
      elevation="0"
      :id="id"
      class="board device-dropzone"
    >
        <slot class="row"/>
        <div
         Drop Card here
        </div>
    </v-card>
</template>

在插槽中，添加了带有文本的图像和 div。这也是脚本：

<script>
import interact from 'interactjs';

export default {
  name: 'Devices',
  props: ['id', 'acceptsDrop'],
  data() {
    return {
      extendedHover: false,
      hoverEnter: false,
      timer: null,
      totalTime: 2,
    };
  },
  methods: {
    resetHover() {
      alert('reset');
    },
    drop(e) {
      let wantedId = e.relatedTarget.id.split('-')[0];
      console.log(wantedId);
      console.warn(e.target);
      e.target.classList.remove('hover-drag-over');
      this.extendedHover = false;
      console.log('-------------dropped');
      console.warn('dropped onto device');
      this.$emit('dropped-component', cardId);
      e.target.classList.remove('hover-drag-over'); */
    }, …