Toward a solution for issue #118

Author: David-Desmaisons

dist/vuedraggable.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -77,6 +79,10 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
         required: false,
         default: null
       },
+      noTransitionOnDrag: {
+        type: Boolean,
+        default: false
+      },
       clone: {
         type: Function,
         default: function _default(original) {
@@ -243,6 +249,20 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
           var numberIndexes = indexes.length;
           return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
         },
+        getComponent: function getComponent() {
+          return this.$slots.default[0].componentInstance;
+        },
+        resetTransitionData: function resetTransitionData(index) {
+          if (!this.noTransitionOnDrag || !this.transitionMode) {
+            return;
+          }
+          var nodes = this.getChildrenNodes();
+          nodes[index].data = null;
+          var transitionContainer = this.getComponent();
+          var oldChildren = transitionContainer.children;
+          transitionContainer.children = [];
+          transitionContainer.kept = undefined;
+        },
         onDragStart: function onDragStart(evt) {
           this.context = this.getUnderlyingVm(evt.item);
           evt.item._underlying_vm_ = this.clone(this.context.element);
@@ -269,6 +289,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
           var oldIndex = this.context.index;
           this.spliceList(oldIndex, 1);
           var removed = { element: this.context.element, oldIndex: oldIndex };
+          this.resetTransitionData(oldIndex);
           this.emitChanges({ removed: removed });
         },
         onDragUpdate: function onDragUpdate(evt) {
@@ -312,7 +333,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
     return draggableComponent;
   }
 
-  if (typeof exports == "object") {
+  if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) == "object") {
     var Sortable = require("sortablejs");
     module.exports = buildDraggable(Sortable);
   } else if (typeof define == "function" && define.amd) {

dist/vuedraggable.min.js

@@ -15,7 +15,7 @@
 
   <div id="main">
     <div class="container-fluid machine-contents">
-      <draggable :list="jobs" :options="{animation:150}" :no-default-animation-on-drag="true" @start="drag=true" @end="drag=false">
+      <draggable :list="jobs" :options="{animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
         <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
           <div v-for="(job, index) in jobs" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
             <div>

examples/Transition_example_2.html

@@ -17,7 +17,7 @@
     <div id="areas">
       <div id="columns">
         <div class="container-fluid machine-contents list">
-          <draggable :list="jobs" :options="{group:'a', animation:150}" :no-default-animation-on-drag="true" @start="drag=true" @end="drag=false">
+          <draggable :list="jobs" :options="{group:'a', animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
             <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
               <div v-for="(job, index) in jobs" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
                 <div>
@@ -33,7 +33,7 @@
         </div>
 
         <div class="container-fluid machine-contents list">
-          <draggable :list="jobs2" :options="{group:'a', animation:150}" :no-default-animation-on-drag="true" @start="drag=true" @end="drag=false">
+          <draggable v-model="jobs2" :options="{group:'a', animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
             <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
               <div v-for="(job, index) in jobs2" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
                 <div>
@@ -50,7 +50,8 @@
 
       </div>
     </div>
-    <button v-on:click="add">Add</button>
+    <button v-on:click="add">Add list 1</button>
+    <button v-on:click="add2">Add list 2</button>
   </div>
   <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
   <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>

examples/Transition_example_3.html

@@ -31,7 +31,10 @@ var vm = new Vue({
       arr.splice(index, 1);
     },
     add: function () {
-      this.jobs.push({jobNumber: "14037-"+ count++})
+      this.jobs.push({jobNumber: "14022-"+ count++})
+    },
+    add2: function () {
+      this.jobs2.push({jobNumber: "14046-"+ count++})
     }
   }
 })

examples/script/transition3.js

@@ -57,6 +57,10 @@
         required: false,
         default: null
       },
+      noTransitionOnDrag: {
+        type: Boolean,
+        default: false
+      },
       clone: {
         type: Function,
         default: (original) => { return original; }
@@ -218,6 +222,21 @@
           return (domIndex > numberIndexes - 1) ? numberIndexes : indexes[domIndex]
         },
 
+        getComponent() {
+          return this.$slots.default[0].componentInstance
+        },
+
+        resetTransitionData(index) {
+          if (!this.noTransitionOnDrag || !this.transitionMode) {
+            return
+          }
+          var nodes = this.getChildrenNodes()
+          nodes[index].data = null
+          const transitionContainer = this.getComponent()
+          transitionContainer.children = []
+          transitionContainer.kept = undefined
+        },
+
         onDragStart(evt) {
           this.context = this.getUnderlyingVm(evt.item)
           evt.item._underlying_vm_ = this.clone(this.context.element)
@@ -246,6 +265,7 @@
           const oldIndex = this.context.index
           this.spliceList(oldIndex, 1)
           const removed = { element: this.context.element, oldIndex }
+          this.resetTransitionData(oldIndex)
           this.emitChanges({ removed })
         },