Official example: Cannot set properties of null (setting '__draggable_context')

[chioio]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Jsfiddle link

Step by step scenario

Copy vue.draggable.next transition example in vue 3 project. Run... Err!!!

[jianqiao0313]

+1

[syropian]

Also running in to this on a Vue 3 project (on ^4.1.0)

[Kevin123X]

how to reslove

[Quasarman]

Has anyone resolved this issue?

[ajdvoynos]

This only seems to happen with Vue versions 3.2.32 and above. It also explains why the deployed sample seems to work fine. If the maintainer were to update the package.lock.json, then it would stop working.

A workaround I've found so far is to NOT use the tag prop, but instead pass the TransitionGroup in the componentData prop, like so:

<template>
    <Draggable 
        v-model="myArray" 
        itemKey="id" 
        :componentData="{ 
            tag: 'div', 
            type: 'transition-group'
        }">
        <template #item="{element}">
            <div>{{element.label}}</div>
        </template>
    </Draggable>
</template>
<script setup>
import {ref} from 'vue';
import Draggable from 'vuedraggable'
const myArray = ref([
    {
        id: 3,
        label: 'third'
    },
    {
        id: 1,
        label: 'first'
    },
    {
        id: 2,
        label: 'second'
    }
])
</script>

[ajdvoynos]

Duplicate of #159

[vedmant]

@ajdvoynos This doesn't work for tables, it's not allowing to set tag: 'tbody, , always renders div.

[ErhardScampi]

tag="transition-group" is outside the component data in the example

https://github.com/SortableJS/vue.draggable.next/tree/master/example/components)/transition-example-2.vue

<draggable class="list-group" tag="transition-group" :component-data="{ tag: 'ul', type: 'transition-group', name: !drag ? 'flip-list' : null }" v-model="list"

if you delete tag="transition-group". it works even with script-setup syntax : By the way I do not know for what purpose is tag="transition-group" Using Quasar 3.7.1

Indeed tag is ignored its always a div but it does not matter at the moment I put the q-card in the template.....

[hugegegewu]

tag="transition-group" is outside the component data in the example

https://github.com/SortableJS/vue.draggable.next/tree/master/example/components)/transition-example-2.vue

<draggable class="list-group" tag="transition-group" :component-data="{ tag: 'ul', type: 'transition-group', name: !drag ? 'flip-list' : null }" v-model="list"

if you delete tag="transition-group". it works even with script-setup syntax : By the way I do not know for what purpose is tag="transition-group" Using Quasar 3.7.1

Indeed tag is ignored its always a div but it does not matter at the moment I put the q-card in the template.....

You are right! It had confused me over several hours. Thank you very much!