WIP

Author: David-Desmaisons

example/components/simple.vue

@@ -36,7 +36,7 @@
         @start="dragging = true"
         @end="dragging = false"
       >
-        <template v-slot:item="{ element }">
+        <template #item="{ element }">
           <div class="list-group-item" :class="{ 'not-draggable': !enabled }">
             {{ element.name }}
           </div>

example/components/third-party.vue

@@ -16,7 +16,7 @@
         :component-data="collapseComponentData"
         item-key="id"
       >
-        <template v-slot:item="{ element }">
+        <template #item="{ element }">
           <el-collapse-item :title="element.title" :name="element.id">
             <div v-for="(lign, idx) in element.text" :key="idx">{{ lign }}</div>
           </el-collapse-item>

example/components/transition-example-2.vue

@@ -22,7 +22,7 @@
         @end="drag = false"
         item-key="order"
       >
-        <template v-slot:item="{ element }">
+        <template #item="{ element }">
           <li class="list-group-item">
             <i
               :class="

example/components/transition-example.vue

@@ -22,7 +22,7 @@
         @start="isDragging = true"
         @end="isDragging = false"
       >
-        <template v-slot:item="{ element }">
+        <template #item="{ element }">
           <li class="list-group-item">
             <i
               :class="

src/core/componentStructure.js

@@ -1,19 +1,19 @@
-import { nextTick } from "vue";
-
 const getHtmlElementFromNode = ({ el }) => el;
+const addContext = (domElement, context) => (domElement.__draggable_context = context);
+const getContext = domElement => domElement.__draggable_context;
 
 class ComponentStructure {
-  constructor({ nodes: { header, default: defaultNodes, footer }, root, $el }) {
+  constructor({
+    nodes: { header, default: defaultNodes, footer },
+    root,
+    realList
+  }) {
     this.nodes = { header, default: defaultNodes, footer };
     this.children = [...header, ...defaultNodes, ...footer];
-    this.offsets = {
-      header: header.length,
-      footer: footer.length
-    };
     this.externalComponent = root.externalComponent;
     this.rootTransition = root.transition;
     this.tag = root.tag;
-    this.setHtmlRoot($el);
+    this.realList = realList;
   }
 
   get _domChildrenFromNodes() {
@@ -30,43 +30,44 @@ class ComponentStructure {
     return h(tag, attributes, option);
   }
 
-  setHtmlRoot($el) {
-    if (!$el) {
-      return;
-    }
-    this.$el = $el;
-    nextTick(() => {
-      this.visibleIndexes = this._computeIndexes();
+  updated() {
+    const {
+      nodes: { default: defaultNodes },
+      realList
+    } = this;
+    defaultNodes.forEach((node, index) => {
+      addContext(getHtmlElementFromNode(node), {
+        element: realList[index],
+        index
+      });
     });
-    return this;
   }
 
-  _computeIndexes() {
+  getUnderlyingVm(domElement) {
+    return getContext(domElement);
+  }
+
+  getVmIndexFromDomIndex(domIndex, $el) {
+    const domChildren = $el.children;
+    const domElement = domChildren.item(domIndex);
+    const context = getContext(domElement);
+    if (context) {
+      return context.index;
+    }
     const {
-      _domChildrenFromNodes,
-      offsets: { footer: footerOffset }
+      nodes: { default: defaultNodes }
     } = this;
+    const { length } = defaultNodes;
 
-    const domChildren = this.$el.children;
-    const footerIndex = domChildren.length - footerOffset;
-    const rawIndexes = [...domChildren].map((elt, idx) =>
-      idx >= footerIndex
-        ? _domChildrenFromNodes.length
-        : _domChildrenFromNodes.indexOf(elt)
-    );
-    return rawIndexes;
-  }
-
-  computeVmIndex(domElement) {
-    return this._domChildrenFromNodes.indexOf(domElement);
-  }
+    if (length === 0) {
+      return -1;
+    }
 
-  getVmIndexFromDomIndex(domIndex) {
-    const { visibleIndexes } = this;
-    const numberIndexes = visibleIndexes.length;
-    return domIndex > numberIndexes - 1
-      ? numberIndexes
-      : visibleIndexes[domIndex];
+    const firstDomListElement = getHtmlElementFromNode(defaultNodes[0]);
+    const indexFirstDomListElement = [...domChildren].findIndex(
+      element => element === firstDomListElement
+    );
+    return domIndex < indexFirstDomListElement ? -1 : length;
   }
 }
 

src/core/renderHelper.js

@@ -45,10 +45,10 @@ function getRootInformation(tag) {
   };
 }
 
-function computeComponentStructure({ $slots, tag, $el, realList, itemKey }) {
+function computeComponentStructure({ $slots, tag, realList, itemKey }) {
   const nodes = computeNodes({ $slots, realList, itemKey });
   const root = getRootInformation(tag);
-  return new ComponentStructure({ nodes, root, $el });
+  return new ComponentStructure({ nodes, root, realList });
 }
 
 export { computeComponentStructure };

src/vuedraggable.js

@@ -74,18 +74,29 @@ const draggableComponent = defineComponent({
 
   props,
 
+  data() {
+    return {
+      error: false
+    };
+  },
+
   render() {
-    const { $slots, $attrs, tag, componentData, $el, realList, itemKey } = this;
-    const componentStructure = computeComponentStructure({
-      $slots,
-      tag,
-      $el,
-      realList,
-      itemKey
-    });
-    this.componentStructure = componentStructure;
-    const attributes = getComponentAttributes({ $attrs, componentData });
-    return componentStructure.render(h, attributes);
+    try {
+      this.error = false;
+      const { $slots, $attrs, tag, componentData, realList, itemKey } = this;
+      const componentStructure = computeComponentStructure({
+        $slots,
+        tag,
+        realList,
+        itemKey
+      });
+      this.componentStructure = componentStructure;
+      const attributes = getComponentAttributes({ $attrs, componentData });
+      return componentStructure.render(h, attributes);
+    } catch (err) {
+      this.error = true;
+      return h("pre", { style: { color: "red" } }, err.stack);
+    }
   },
 
   created() {
@@ -97,8 +108,12 @@ const draggableComponent = defineComponent({
   },
 
   mounted() {
+    if (this.error) {
+      return;
+    }
+
     const { $attrs, $el, componentStructure } = this;
-    componentStructure.setHtmlRoot($el);
+    componentStructure.updated();
 
     const sortableOptions = createSortableOption({
       $attrs,
@@ -112,6 +127,10 @@ const draggableComponent = defineComponent({
     $el.__draggable_component__ = this;
   },
 
+  updated() {
+    this.componentStructure.updated();
+  },
+
   beforeUnmount() {
     if (this._sortable !== undefined) this._sortable.destroy();
   },
@@ -137,14 +156,7 @@ const draggableComponent = defineComponent({
 
   methods: {
     getUnderlyingVm(domElement) {
-      const index = this.componentStructure.computeVmIndex(domElement);
-      if (index === -1) {
-        //Edge case during move callback: related element might be
-        //an element different from collection
-        return null;
-      }
-      const element = this.realList[index];
-      return { index, element };
+      return this.componentStructure.getUnderlyingVm(domElement) || null;
     },
 
     getUnderlyingPotencialDraggableComponent(htmElement) {
@@ -192,7 +204,7 @@ const draggableComponent = defineComponent({
     },
 
     getVmIndexFromDomIndex(domIndex) {
-      return this.componentStructure.getVmIndexFromDomIndex(domIndex);
+      return this.componentStructure.getVmIndexFromDomIndex(domIndex, this.$el);
     },
 
     onDragStart(evt) {