Vue.js环境下interact.js拖拽事件多次触发问题求助

我仔细看了你的代码，发现几个关键问题会导致drop事件多次触发，咱们一步步来排查修复：

1. 错误的事件绑定方式（ondragenter） #

在Devices组件的mounted钩子中，你给dropzone的ondragenter传的是dropzone.dragenter()，这会立即执行dragenter方法，而不是把方法作为事件回调绑定。正确的做法是传递方法引用，去掉括号：

interact('.device-dropzone').dropzone({
  overlap: 0.9,
  ondragenter: dropzone.dragenter, // 去掉括号！
  ondrop: function (event) {
    dropzone.drop(event);
  },
})

这个错误会导致页面加载时就执行一次dragenter，还会干扰后续的事件触发逻辑，是首要修复点。

2. DOM事件冒泡导致多次触发 #

你的dropzone是<v-card class="board device-dropzone">，内部包含了slot内容和<div>Drop Card here</div>。当拖拽元素放到这些子元素上时，drop事件会通过DOM冒泡传递到父级dropzone，再加上interact.js的事件机制，就会重复触发drop回调。

解决这个问题有两个实用方案：

• 在drop方法中校验目标元素：只处理dropzone容器本身的drop事件，忽略子元素的触发：

  drop(e) {
    // 确保触发事件的是dropzone容器本身
    if (!e.target.classList.contains('device-dropzone')) {
      return;
    }
    // 剩余逻辑
    let wantedId = e.relatedTarget.id.split('-')[0];
    console.log(wantedId);
    e.target.classList.remove('hover-drag-over');
    this.extendedHover = false;
    console.log('-------------dropped');
    console.warn('dropped onto device');
    this.$emit('dropped-component', wantedId); // 这里你之前写的cardId是未定义变量，应该用wantedId
  }
  

• 配置interact.js的dropzone限制触发条件：在dropzone配置里加上accept选项，限制只有指定元素能触发drop，同时开启onlyValidDrop: true：

  interact('.device-dropzone').dropzone({
    overlap: 0.9,
    accept: '.draggable-card, .dragged-clone',
    onlyValidDrop: true,
    ondragenter: dropzone.dragenter,
    ondrop: function (event) {
      dropzone.drop(event);
    },
  })
  

3. 拖拽克隆元素未及时清理 #

在可拖拽组件的move事件中，你克隆了原元素作为拖拽目标，但在drag结束后，克隆元素没有被彻底清理。残留的克隆元素可能会干扰后续的事件触发，建议在end事件里明确清理：

.on('end', function (event) {
  console.error('end drag');
  // 找到并删除克隆元素
  const clone = document.querySelector(`#${component.id}-clone`);
  if (clone) {
    clone.remove();
  }
});

另外，你的dragMoveListener里还有个变量名错误，需要修正：

// 原错误代码
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
// 修正为
target.setAttribute('data-x', valX);
target.setAttribute('data-y', valY);

按照上面的步骤修改后，应该就能解决drop事件多次触发的问题了。先修复事件绑定的错误，再处理冒泡问题，最后清理克隆元素，功能就能正常运行了。

内容的提问来源于stack exchange，提问作者NotARobot