Question

我正在使用具有拖放功能的Web应用程序。到目前为止，我使用了基本的HTML5拖动功能，但是现在我切换到使用库interact.js。

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

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

Assets.xcassets

在广告位中，添加了带有文字的图片和div。这也是脚本：

LaunchScreen.storyboard

可拖动组件就是这个：

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

使用脚本：

<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'); */
    },
    dragenter() {
      console.log('------------dragenter');
      this.hoverEnter = true;
        setTimeout(() => {
          this.extendedHover = true;
          console.log('extended hover detected');
        }, 2000);
      } */
      this.timerID = setTimeout(this.countdown, 3000);
    },
    dragover(e) {
      if (this.acceptsDrop) {
        e.target.classList.add('hover-drag-over');
      }
    },
    dragleave(e) {
      if (this.acceptsDrop) {
        clearInterval(this.timer);
        this.timer = null;
        this.totalTime = 2;
        e.target.classList.remove('hover-drag-over');
        this.extendedHover = false;
        this.hoverEnter = false;
        console.log('................');
        console.warn(this.extendedHover);
        // this.$emit('cancel-hover');
      }
    },
    countdown() {
     console.log('!!!!!!!!!!!!!!!!!!!!');
     if (this.hoverEnter === true) {
        this.extendedHover = true;
        console.log('-------------------');
        console.warn(this);
        console.warn(this.extendedHover);
        this.$emit('long-hover');
      } 
    },
  },
  mounted() {
    // enable draggables to be dropped into this
    const dropzone = this;
    interact('.device-dropzone').dropzone({
      overlap: 0.9,
      ondragenter: dropzone.dragenter(),
      ondrop: function (event) {
        dropzone.drop(event);
      },
    })
  },
};
</script>

通常，拖放操作有效。但是我不明白为什么仅丢弃一张卡时，丢弃事件将触发四次。有人可以帮我吗？

Answer 1

我在使用相同的框架和库时遇到了类似的问题。由于有一些基于事件触发的逻辑，因此多次触发时会破坏我的应用程序。

我怀疑此问题与bubbling of events有关。

因此，我的解决方案是在我的event.stopImmediatePropagation()处理程序中添加drop(event)。

如所引用的文章中所述，在停止事件冒泡时应格外小心，因为它不会在其他地方造成不可预见的后果。

拖放事件触发多次

1 个答案: