TypeError: Cannot set properties of null (setting '__draggable_context')

[keziakoko]

Hello,

I am getting the following error when my page loads:

TypeError: Cannot set properties of null (setting '__draggable_context')
    at addContext (node_modules\vuedraggable\dist\vuedraggable.umd.js:4478:1)
    at eval (node_modules\vuedraggable\dist\vuedraggable.umd.js:4523:1)
    at Array.forEach (<anonymous>)
    at ComponentStructure.updated (node_modules\vuedraggable\dist\vuedraggable.umd.js:4522:1)
    at Proxy.updated (node_modules\vuedraggable\dist\vuedraggable.umd.js:4829:1)
    at callWithErrorHandling (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:155:1)
    at callWithAsyncErrorHandling (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:164:1)
    at Array.hook.__weh.hook.__weh (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:2685:1)
    at flushPostFlushCbs (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:356:1)
    at flushJobs (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:401:1)

I cannot drag anything, when I try to drag I get the following error:

node_modules\vuedraggable\dist\vuedraggable.umd.js:4974 Uncaught TypeError: Cannot read properties of null (reading 'index')
    at Proxy.onDragUpdate (node_modules\vuedraggable\dist\vuedraggable.umd.js:4974:1)
    at Proxy.eval (node_modules\vuedraggable\dist\vuedraggable.umd.js:4694:1)
    at Sortable.eval (node_modules\vuedraggable\dist\vuedraggable.umd.js:4705:1)
    at dispatchEvent (node_modules\sortablejs\modular\sortable.esm.js:916:1)
    at _dispatchEvent (node_modules\sortablejs\modular\sortable.esm.js:961:1)
    at Sortable._onDrop (node_modules\sortablejs\modular\sortable.esm.js:2216:1)
    at Sortable.handleEvent (node_modules\sortablejs\modular\sortable.esm.js:2269:1)
    at Sortable.__trace__ [as handleEvent] (node_modules\@bugsnag\browser\dist\bugsnag.js:2764:1)

I have tried downgrading to versions 4.0.1 as well as version 4.0.0 and both still throw the error.
This is my component:

<draggable item-key="id" v-model="person" handle=".gripIcon" @start="drag=true" @end="drag=false" tag="transition-group" :component-data="{name:'flip-list'}">
    <template #item="{element,index}">
        <component :is="element.name" :id="element.id"
                   v-bind:key="element.id"
                   v-on:delete-row="deleteRow(index)"
                   v-on:update-info="data => updateInfo(index,data)">
        </component>
    </template>
</draggable>

Please assist.

[JokerMartini]

This issue is never ending what is this? I get this issue all the time now??? This has broken the app completely. Hopefully this is resolved soon.

[JokerMartini]

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

[superchangme]

man,i have same question with you,but it may be not Stable Recurrence,Have you solved it?

[superchangme]

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

Do you use vite ?

[JokerMartini]

They don't work with vite or webpack

[superchangme]

They don't work with vite or webpack

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

[keziakoko]

I have not solved it, it is still happening. I do not use vite.

[keziakoko]

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!

[JokerMartini]

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

[keziakoko]

Currently running vue version 3.0.0. We have not upgraded it yet.

[JokerMartini]

if that is the case im not sure why it's broken on your end.

[redrbrt]

Same error for me, i couldn't make it run with tag="transition-group" (vite, vue 3, typescript) by following the simple code example guide, i decided to switch the SortableJS vanilla version, hope could it be fixed, thank you!

[gbaggaley]

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"

[hooray]

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

[mreduar]

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",

[tujianglin]

Can you use version 3.2.30 without errors

[Seuthes]

There seems to be a pull request #145 with a fix for this issue. I hope there will be soon a release with it.

[JokerMartini]

I don't know of the dev works on the repo anymore

…

On Wed, May 11, 2022, 7:32 AM Seuthes ***@***.***> wrote: There seems to be a pull request #145 <#145> with a fix for this issue. I hope there will be soon a release with it. — Reply to this email directly, view it on GitHub <#140 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKZ4LI65QPVIA4BMKQOTYDVJOLEHANCNFSM5UIF3DTQ> . You are receiving this because you commented.Message ID: <SortableJS/vue. ***@***.***>

[hooray]

I don't know of the dev works on the repo anymore
…
On Wed, May 11, 2022, 7:32 AM Seuthes @.> wrote: There seems to be a pull request #145 <#145> with a fix for this issue. I hope there will be soon a release with it. — Reply to this email directly, view it on GitHub <#140 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKZ4LI65QPVIA4BMKQOTYDVJOLEHANCNFSM5UIF3DTQ . You are receiving this because you commented.Message ID: <SortableJS/vue. @.>

I think the official has given up this repo, so we're on our own.
maybe we need to migrate to the original sortable.js

[GAtomis]

This is a helpless choice. I have to reduce my version. I still hope to use vue-core@next as soon as possible

[hellozhaoxudong]

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

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

[shenjilina]

remove tag="transition-group"

[hooray]

我使用了： "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 开发的

[MaxLeiter]

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.

[FeckNeck]

@MaxLeiter Was having the exact same issue so I tried out your library. Unfortunately I got this issue when I try to use it :

runtime-core.esm-bundler.js?9d6a:2948 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
    at renderSlot (runtime-core.esm-bundler.js?9d6a:2948:1)
    at eval (sortablejs-vue3.es.js?e663:76:1)
    at renderList (runtime-core.esm-bundler.js?9d6a:2879:1)
    at eval (sortablejs-vue3.es.js?e663:74:1)
    at normalizeChildren (runtime-core.esm-bundler.js?9d6a:6946:1)
    at createBaseVNode (runtime-core.esm-bundler.js?9d6a:6699:1)
    at _createVNode (runtime-core.esm-bundler.js?9d6a:6801:1)
    at createVNodeWithArgsTransform (runtime-core.esm-bundler.js?9d6a:6657:1)
    at createBlock (runtime-core.esm-bundler.js?9d6a:6632:1)
    at Proxy.eval (sortablejs-vue3.es.js?e663:69:1)

[MaxLeiter]

@FeckNeck open an issue there please

[ceciogit]

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.

[usmanlogin]

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 👍

[Liberty-liu]

Hi guys, this is how I solved it, but need to change the source code, but there will be [Vue warn]: 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);
    })
  );`

[danielkellyio]

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"

[suterma]

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

[ddmy]

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

[pingan8787]

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.

Thank you very much. It's very helpful.

[joeqiao64]

Adding image.setInteractive() before this.input.setDraggable(image) worked for me.

[leoboyerbx]

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

[andcl]

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

Indeed

[danielsussa]

Created a simple PR, 3 lines...
#207

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

[tvld]

lousy, this issue persists in v4.1.0 and vue v3.2.47 ;

[illusionno]

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 👍

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 is setting an animation, but if one of the original elements is added, there is no transition

[denisding]

item-key="field" 和 tag="transition-group" 只能保留一个，

1. 使用 item-key="field" 不会出现错误
   2.使用 tag="transition-group" 也不会出现错误（但是会收到一个警告）
   另外，两者形成的代码结构不同，在使用 tag="transition-group" 时，构建的 div 都会被放到 draggable 的父节点，但是如果没有 tag="transition-group" 时，构建的 div 会被放到一个新的 div 中，所以有效的做法是仅使用 item-key="field" ，然后外加楼上 @danielkellyio 所说的 :animation="150"

Only one of item-key="field" and tag="transition-group" can be used:

1. Using item-key="field" will not result in any errors.
2. Using tag="transition-group" will also not result in errors (but will trigger a warning).
   Additionally, the code structures formed by the two differ. When using tag="transition-group," the constructed divs will be placed within the parent node of . Without tag="transition-group," the constructed divs will be placed within a new
   . Therefore, an effective approach is to use only item-key="field," and then add :animation="150" as mentioned above by @danielkellyio.

仅仅使用 item-key="field"，only using item-key="field"

仅仅使用 tag="transition-group"，only using tag="transition-group"

使用 item-key="field" 和 tag="transition-group"，using item-key="field" and tag="transition-group"