Vue.Draggable如何实现拖拽元素到目标元素（文件拖入文件夹）

我之前也遇到过这个问题！Vue.Draggable的@change事件确实有点局限，只能拿到被拖拽元素的信息，没法直接获取目标文件夹的详情。不过有两种靠谱的方法可以解决这个问题，帮你更新file.folder_name：

方法一：利用@add事件直接关联目标文件夹 #

当你把文件拖入某个文件夹的Draggable容器时，该容器的@add事件会被触发，而且你可以在绑定事件时直接传入当前文件夹的信息。这种方法最直接，也不容易出错。

模板代码示例 #

<!-- 文件夹列表，每个文件夹对应一个Draggable容器 -->
<div v-for="folder in folders" :key="folder.id" class="folder-container">
  <h3>{{ folder.name }}</h3>
  <draggable
    :list="folder.files"
    group="files"
    @add="handleFileDrop(folder, $event)"
    item-key="id"
  >
    <template #item="{ element: file }">
      <div class="file-item">{{ file.name }}</div>
    </template>
  </draggable>
</div>

<!-- 未分类的文件列表 -->
<draggable
  :list="uncategorizedFiles"
  group="files"
  item-key="id"
>
  <template #item="{ element: file }">
    <div class="file-item">{{ file.name }}</div>
  </template>
</draggable>

逻辑代码示例 #

export default {
  data() {
    return {
      folders: [
        { id: 1, name: "文档", files: [] },
        { id: 2, name: "图片", files: [] }
      ],
      uncategorizedFiles: [
        { id: 101, name: "报告.pdf", folder_name: "" },
        { id: 102, name: "风景.jpg", folder_name: "" }
      ]
    };
  },
  methods: {
    handleFileDrop(targetFolder, event) {
      // 获取被拖拽的文件
      const draggedFile = event.added.element;
      // 更新文件的folder_name
      draggedFile.folder_name = targetFolder.name;
      
      // Vue.Draggable会自动处理列表的增删，无需额外操作原列表
    }
  }
};

方法二：通过拖拽事件记录目标文件夹 #

如果你更倾向于使用@change事件，可以通过监听dragenter和dragleave事件来记录当前进入的文件夹，然后在@change中使用这个记录的信息。

模板代码示例 #

<div v-for="folder in folders" :key="folder.id" class="folder-container"
     @dragenter="currentTargetFolder = folder"
     @dragleave="currentTargetFolder = null">
  <h3>{{ folder.name }}</h3>
  <draggable
    :list="folder.files"
    group="files"
    @change="onFoldersChange"
    item-key="id"
  >
    <template #item="{ element: file }">
      <div class="file-item">{{ file.name }}</div>
    </template>
  </draggable>
</div>

<!-- 未分类文件列表 -->
<draggable
  :list="uncategorizedFiles"
  group="files"
  item-key="id"
>
  <template #item="{ element: file }">
    <div class="file-item">{{ file.name }}</div>
  </template>
</draggable>

逻辑代码示例 #

export default {
  data() {
    return {
      folders: [/* 文件夹数据 */],
      uncategorizedFiles: [/* 文件数据 */],
      currentTargetFolder: null // 记录当前拖拽进入的文件夹
    };
  },
  methods: {
    onFoldersChange(event) {
      // 只有当元素被添加到文件夹，且有记录的目标文件夹时才更新
      if (event.added && this.currentTargetFolder) {
        const draggedFile = event.added.element;
        draggedFile.folder_name = this.currentTargetFolder.name;
        // 重置目标文件夹记录
        this.currentTargetFolder = null;
      }
    }
  }
};

这两种方法都能完美实现你想要的效果，个人更推荐第一种，因为它直接通过Draggable的原生事件关联目标，逻辑更清晰，也避免了拖拽过程中可能出现的状态混乱问题。

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