Vue.Draggable 拖拽难题：无法拖入非空组？手把手教你解决！

vue.js

2024-03-13 07:14:31

Vue.Draggable 中的拖放功能：解决项目无法拖入非空组的问题

简介

在使用 Vue.Draggable 时，如果组配置不当，用户可能会遇到无法将项目拖入非空组的问题。本指南将详细介绍如何解决此问题，并提供逐步说明和示例代码。

问题原因

Vue.Draggable 使用 SortableJS 库实现拖放功能，其中组配置决定了哪些项目可以拖入哪些组。如果组名称不唯一或不正确配置，拖放操作就会出现问题。

解决方案

1. 设置唯一的组名称

为每个组分配一个唯一的名称。在提供的代码示例中，"group" 和 "item" 组的名称都相同。这会导致冲突，因为 SortableJS 无法区分这两个组。可以将 "item" 组的名称更改为更具性的名称，例如 "items"。

2. 正确配置组选项

在 Vue.Draggable 组件中，group 选项指定项目所属的组。确保 group 选项的值与组的名称匹配。例如，对于 "group" 组，group 选项应设置为 "group"。

3. 验证组之间没有循环引用

如果组之间存在循环引用（即一个组包含另一个组，而另一个组又包含第一个组），则可能导致拖放操作失败。确保组结构中不存在循环引用。

更新后的代码示例

<template>
  <div>
    <md-toolbar class="md-primary">
      <h1 class="md-title">Vue Material</h1>
    </md-toolbar>

    <md-content>
      <md-list>
        <draggable :list="grouped" group="group">
          <md-list-item v-for="item in grouped" :key="item.id" md-expand>
            <md-list-item-content>
              <span>{{ item.name }}</span>
            </md-list-item-content>
            <md-list slot="md-expand">
              <draggable :list="item.children" group="items">
                <md-list-item v-for="child in item.children" :key="child.id">
                  <md-list-item-content>
                    <span>{{ child.name }}</span>
                  </md-list-item-content>
                </md-list-item>
              </draggable>
            </md-list>
          </md-list-item>

          <draggable :list="unGrouped" group="items">
            <md-list-item v-for="item in unGrouped" :key="item.id">
              <md-list-item-content>
                <span>{{ item.name }}</span>
              </md-list-item-content>
            </md-list-item>
          </draggable>
        </draggable>
      </md-list>
    </md-content>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'App',
  components: {
    draggable
  },
  data: () => ({
    grouped: [
      {id: 1, name: 'Empty group', children: []},
      {
        id: 2,
        name: 'Non-empty group',
        children: [
          {id: 5, name: 5},
          {id: 6, name: 6}
        ]
      }
    ],
    unGrouped: [
      {id: 3, name: 3},
      {id: 4, name: 4}
    ]
  })
}
</script>

<style lang="scss"></style>