Vue组件拖拽移动后如何保留事件绑定？

你直接使用原生DOM的prepend方法移动组件的真实DOM元素，这绕过了Vue的虚拟DOM机制。Vue的事件绑定是基于虚拟DOM维护的，手动移动真实DOM后，虚拟DOM与真实DOM的对应关系断裂，导致组件的事件绑定失效。

方案1：用Vue响应式数据控制组件位置（推荐） #

放弃手动操作DOM，改用响应式数组维护各列的组件列表，拖拽时更新数组数据，让Vue自动完成DOM渲染，事件绑定会自然保留。

示例父组件代码：

<template>
  <div class="columns">
    <!-- 列1 -->
    <div 
      class="column js-droppable--any"
      @drop="handleDrop($event, 'column1')"
      @dragover="allowDrop"
    >
      <ActionBox 
        v-for="boxId in column1Items" 
        :key="boxId" 
        :id="boxId"
      />
    </div>

    <!-- 列2 -->
    <div 
      class="column js-droppable--any"
      @drop="handleDrop($event, 'column2')"
      @dragover="allowDrop"
    >
      <ActionBox 
        v-for="boxId in column2Items" 
        :key="boxId" 
        :id="boxId"
      />
    </div>
  </div>
</template>

<script>
import ActionBox from './ActionBox.vue';

export default {
  components: { ActionBox },
  data() {
    return {
      column1Items: ['box-1', 'box-2'],
      column2Items: ['box-3']
    };
  },
  methods: {
    allowDrop(event) {
      event.preventDefault();
    },
    handleDrop(event, targetColumn) {
      const boxId = event.dataTransfer.getData('text');
      
      // 从原列移除目标组件ID
      if (this.column1Items.includes(boxId)) {
        this.column1Items = this.column1Items.filter(id => id !== boxId);
      } else if (this.column2Items.includes(boxId)) {
        this.column2Items = this.column2Items.filter(id => id !== boxId);
      }

      // 将组件ID添加到目标列
      this[`${targetColumn}Items`].unshift(boxId);
    }
  }
};
</script>

方案2：手动重新挂载组件（不推荐，仅作兼容参考） #

如果必须手动操作DOM，需要先销毁组件，移动DOM后再重新挂载，让Vue重新建立事件绑定：

drop(event) {
  const droppedElement = document.getElementById(event.dataTransfer.getData('text'));
  // 通过ref获取组件实例（需在父组件给ActionBox设置:ref="id"）
  const component = this.$refs[droppedElement.id];

  if (event.currentTarget.classList.contains(droppedElement.dataset.target)) {
    // 销毁组件，解除原事件绑定
    component.$destroy();
    // 移动DOM元素
    event.currentTarget.prepend(droppedElement);
    // 重新挂载组件，恢复事件绑定
    component.$mount(droppedElement);
    
    event.currentTarget.classList.remove('drop');
  }
}

优先使用方案1，通过响应式数据让Vue管理组件的渲染和位置，这是符合Vue设计理念的最优解，能彻底避免事件丢失问题。

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