Vue.Draggable结合transition-group使用组件报错解决咨询

问题根源分析 #

出现TypeError: Cannot set properties of null (setting '__draggable_context')错误，主要有两个原因：

1. 代码存在语法错误，导致组件渲染异常；
2. 自定义组件<my-team>可能是多根组件，或者transition-group的子元素不符合要求，导致draggable无法找到目标元素注入上下文。

修复步骤 #

1. 修正代码语法错误

原代码存在两处语法问题：

• :component-data="{name:'fade'} 缺少闭合的大括号和引号，应改为:component-data="{ name: 'fade' }"；
• <my-team>标签未正确闭合，应改为自闭合标签或完整闭合。

2. 确保自定义组件为单一根元素

transition-group要求子元素必须是单一根节点，如果<my-team>是多根组件，需要在外层包裹一个容器（如<div>）：

<!-- MyTeam.vue 组件代码 -->
<template>
  <div class="team-container"> <!-- 必须有单一根元素 -->
    <h3>{{ name }}</h3>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script setup>
defineProps(['id', 'name', 'index'])
</script>

3. 正确配置draggable与transition-group

修正后的完整代码如下：

<draggable 
  :list="teams" 
  item-key="idteam" 
  tag="transition-group" 
  :component-data="{ name: 'fade' }"
>
  <template #item="{ element, index }">
    <my-team 
      :id="element.idteam" 
      :name="element.teamName" 
      :index="index"
    />
  </template>
</draggable>

4. 补充过渡动画样式

需要在样式中定义fade过渡的CSS规则，否则动画不会生效：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

替代方案（若上述方法仍有问题） #

如果不想将draggable的tag设为transition-group，可以将transition-group嵌套在draggable内部，让draggable管理拖拽逻辑，transition-group管理动画：

<draggable :list="teams" item-key="idteam">
  <transition-group name="fade">
    <template #item="{ element, index }">
      <my-team 
        :key="element.idteam"
        :id="element.idteam" 
        :name="element.teamName" 
        :index="index"
      />
    </template>
  </transition-group>
</draggable>

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