Vue.Draggable: Cannot read property 'element' of null when using vue component

Wrapping a div works while wrapping any vue component leads to an error for me. This code is within a nested tree of vue components of which one of the parents also uses draggable (without any issue there).

<draggable
      :list="items"
      tag="v-layout"
      class="row wrap fill-height justify-space-around align-center"
      ghost-class="draggable__ghost-class"
      :group="{ name: 'actions' }"
    >
      <v-flex v-for="(action, i) in items" :key="i" class="action-plan__action__row__edit dropitem" xs4>
        <!-- LEADS TO ERROR: <v-card style="height: 100px; width: 100px; background: green"></v-card> -->
        <div style="height: 100px; width: 100px; background: green"></div>
      </v-flex>
</draggable>

changing the div to a vue component like v-card results in an Cannot read property 'element' of null error when starting to drag.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 15 (5 by maintainers)

Commits related to this issue

Solution for issue #647 — committed to SortableJS/Vue.Draggable by David-Desmaisons 5 years ago

Most upvoted comments

My colleague found a fix, by simply forcing a Vue rerendering when the amount of children change. This is achievemed by supplying a :key to the draggable.

<draggable :list="myArray" :key="myArray.length"></draggable>

Does this work for you as well?

I noticed that the :key thingy was also applied to the <div> in my previous post, which is why I thought that the div itself fixed some of my cases.

Edit: In your case that would be

<v-card>
    <draggable :value="rows" :key="rows.length">

+10

0xShammah on Jun 14, 2019

I’ve had the same issue with this error popping up when reordering nested properties. I can confirm that wrapping my Vue component in a <div> fixed the error.

So for example, the following HTML code:

<draggable :list="page.children" v-bind="dragOptions">
    <transition-group name="list" tag="ul" v-if="hasChildren(page)" class="children">
        <menu-node :active-page="activePage"
                              v-for="child in page.children"
                              :page="child"
                              :key="child.id">
        </menu-node>
    </transition-group>
</draggable>

had to be replaced by:

<draggable :list="page.children" v-bind="dragOptions">
    <transition-group name="list" tag="ul" v-if="hasChildren(page)" class="children">
        <div v-for="child in page.children" :key="child.id">
            <menu-node :active-page="activePage" :page="child">
            </menu-node>
        </div>
    </transition-group>
</draggable>

0xShammah on Jun 11, 2019

Could you create a jsfiddle?

David-Desmaisons on May 28, 2019