vue.draggable.next: TypeError: Cannot set properties of null (setting '__draggable_context')

Guys… for me its working with simply removing tag=“transition-group” and using v-bind=“dragOptions”

computed:{
    dragOptions() {
        return {
            animation: 250,
            group: "people",
            disabled: false,
            ghostClass: "ghost"
        };
    },
}

after that remember remove any transitions effect you have in your css for the dragged element.

I was able to get rid of the error by removing tag="transition-group" but still keep a nice transition by adding the prop :animation="150"

They don’t work with vite or webpack

what a pity,i remove tag="transition-group"

in order to work you have to downgrade your vue and that solves it. go to 3.2.30

我使用了： “vue”: “^3.2.25” “vite”: “^2.8.0” “vuedraggable”: “^4.1.0”

近期重新install或update后发现了bug，通过移除 tag=“transition-group” 后解决了此问题

Removing the tag=“transition-group” worked for me. I no longer get the error. Kinda sad though cause now there’s no more smooth transitions when dragging and swapping items!

I noticed the authors own code examples don’t even work. I think he needs to update them.

I was having this same issue and published a thin wrapper around sortablejs that seems to work more consistently. Feel free to try it out and leave feedback at https://github.com/MaxLeiter/sortablejs-vue3.

Guys… for me its working with simply removing tag=“transition-group” and using v-bind=“dragOptions”

computed:{
    dragOptions() {
        return {
            animation: 250,
            group: "people",
            disabled: false,
            ghostClass: "ghost"
        };
    },
}

after that remember remove any transitions effect you have in your css for the dragged element.

Thanks @ceciogit This also worked for me 👍

This error did not happen to me before and started to happen when I performed an npm update. The error was fixed by setting vue to version 3.2.30 currently 3.2.33 "vue": "3.2.30",

Will the official fix this problem? I see that the last version is still released in 2020

I can second @danielkellyio. I conclude that just the documentation is out of date.

I was working along the official example, and @danielkellyio’s proposal fixed the issue for me. Not even any additional CSS transition styles are required with this solution. Probably the author made all that inline now.

For completeness, here is my current working state: https://github.com/suterma/replayer-pwa/blob/fe4e71f58c853a7f016ccee0056dd917c94882ef/src/views/Setlist.vue#L63

我使用了： “vue”: “^3.2.25” “vite”: “^2.8.0” “vuedraggable”: “^4.1.0”

近期重新install或update后发现了bug，通过移除 tag=“transition-group” 后解决了此问题

不能说解决吧，只能说用这个办法可以通过移除特性的方式避开这个 bug ，我觉得如果这个仓库官方不打算维护了，将 vue-draggable 替换为 sortable 才是最合适的方案，因为 vue-draggable 内核也是基于 sortable 开发的

Created a simple PR, 3 lines… https://github.com/SortableJS/vue.draggable.next/pull/207

In my case, it´s necessary using tag="transition-group" …

Removing “transition-group” and usign animation prop works for having smooth transitions, yes. BUT if the data changes, (for example on a undo action), there is no animation. I’m going to try and make it work directly with vanilla sortableJS

Vue降级到3.2.30问题解决了。 vue.draggable.next好像不维护了，真是难搞

Hi guys, this is how I solved it, but need to change the source code, but there will be [Vue warn]: <TransitionGroup> children must be keyed. But don’t add key. For now, let’s do that. We need to change another way of thinking to solve this problem, such as not using vue version to develop

before:`  const defaultNodes = normalizedList.flatMap((element, index) =>
    item({ element, index }).map(node => {
      node.key = getKey(element);
      node.props = { ...(node.props || {}), "data-draggable": true };
      return node;
    })
  );`

after:`const defaultNodes = normalizedList.flatMap((element, index) =>
    item({ element, index }).map(node => {
      node.key = getKey(element);
      node.props = { ...(node.props || {}), "data-draggable": true };
      return cloneVNode(node);
    })
  );`

@FeckNeck open an issue there please

Not working for me either, I’m using Vue 3.2.33.

Draggable works fine without the transition on it, but I’m getting the same error as soon as I add tag="transition-group"