Correct drag remove

Author: David-Desmaisons

example/components/two-lists.vue

@@ -2,27 +2,31 @@
   <div class="row">
     <div class="col-3">
       <h3>Draggable 1</h3>
-      <draggable class="list-group" :list="list1" group="people" @change="log">
-        <div
-          class="list-group-item"
-          v-for="(element, index) in list1"
-          :key="element.name"
-        >
-          {{ element.name }} {{ index }}
-        </div>
+      <draggable
+        class="list-group"
+        :list="list1"
+        group="people"
+        @change="log"
+        itemKey="name"
+      >
+        <template #item="{ element, index }">
+          <div class="list-group-item">{{ element.name }} {{ index }}</div>
+        </template>
       </draggable>
     </div>
 
     <div class="col-3">
       <h3>Draggable 2</h3>
-      <draggable class="list-group" :list="list2" group="people" @change="log">
-        <div
-          class="list-group-item"
-          v-for="(element, index) in list2"
-          :key="element.name"
-        >
-          {{ element.name }} {{ index }}
-        </div>
+      <draggable
+        class="list-group"
+        :list="list2"
+        group="people"
+        @change="log"
+        itemKey="name"
+      >
+        <template #item="{ element, index }">
+          <div class="list-group-item">{{ element.name }} {{ index }}</div>
+        </template>
       </draggable>
     </div>
 

src/vuedraggable.js

@@ -226,10 +226,7 @@ const draggableComponent = defineComponent({
     },
 
     onDragRemove(evt) {
-      const {
-        componentStructure: { rootContainer }
-      } = this;
-      insertNodeAt(rootContainer, evt.item, evt.oldIndex);
+      insertNodeAt(this.$el, evt.item, evt.oldIndex);
       if (evt.pullMode === "clone") {
         removeNode(evt.clone);
         return;