Improve future index computation

Author: David-Desmaisons

dist/vuedraggable.js

@@ -1,5 +1,9 @@
 '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; };
+
+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); } }
+
 (function () {
   "use strict";
 
@@ -188,6 +192,11 @@
 
           return context;
         },
+        getVmIndex: function getVmIndex(domIndex) {
+          var indexes = this.visibleIndexes;
+          var numberIndexes = indexes.length;
+          return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
+        },
         onDragStart: function onDragStart(evt) {
           this.context = this.getUnderlyingVm(evt.item);
           evt.item._underlying_vm_ = this.clone(this.context.element);
@@ -198,10 +207,7 @@
             return;
           }
           removeNode(evt.item);
-          var indexes = this.visibleIndexes;
-          var domNewIndex = evt.newIndex;
-          var numberIndexes = indexes.length;
-          var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes[domNewIndex];
+          var newIndex = this.getVmIndex(evt.newIndex);
           this.spliceList(newIndex, 0, element);
           this.computeIndexes();
           var added = { element: element, newIndex: newIndex };
@@ -223,7 +229,7 @@
           removeNode(evt.item);
           insertNodeAt(evt.from, evt.item, evt.oldIndex);
           var oldIndex = this.context.index;
-          var newIndex = this.visibleIndexes[evt.newIndex];
+          var newIndex = this.getVmIndex(evt.newIndex);
           this.updatePosition(oldIndex, newIndex);
           var moved = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
           this.emitChanges({ moved: moved });
@@ -233,9 +239,11 @@
             return 0;
           }
           var relatedElement = evt.related;
-          var currentIndex = [].concat(_toConsumableArray(evt.to.children)).indexOf(relatedElement);
+          var currentDOMIndex = [].concat(_toConsumableArray(evt.to.children)).indexOf(relatedElement);
+          var currentIndex = relatedContext.component.getVmIndex(currentDOMIndex);
           var incialIndex = relatedContext.index;
-          return currentIndex !== incialIndex ? incialIndex + 1 : incialIndex;
+          console.log(currentIndex, incialIndex);
+          return Math.max(currentIndex, incialIndex);
         },
         onDragMove: function onDragMove(evt) {
           var onMove = this.move;
@@ -258,7 +266,7 @@
     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

@@ -35,7 +35,7 @@ <h2>List 1 draggable</h2>
            <h2>List 2 draggable</h2>
             <draggable class="dragArea" :list="list2" :options="{group:'people'}">
                 <transition-group tag="div" class="dragArea" name="list-complete">
-                    <div v-for="(element, index) in list2"  :key="element.name" >
+                    <div v-for="(element, index) in list2" :class="{'target': element===targetElement, 'ok':canDrag  , 'ko':!canDrag}" :key="element.name" >
                         {{element.name}}
                     </div>
                 </transition-group>

examples/Cancel.html

@@ -28,17 +28,17 @@ var vm = new Vue({
 				return evt.draggedContext.futureIndex % 2 === 0
 			}
 
-			if (evt.draggedContext.element.name=='apple'){
-				return false
-			}
+			// if (evt.draggedContext.element.name=='apple'){
+			// 	return false
+			// }
 
-			if (evt.relatedContext.element && evt.relatedContext.element.name=='strawberry'){
-				return false
-			}
+			// if (evt.relatedContext.element && evt.relatedContext.element.name=='strawberry'){
+			// 	return false
+			// }
 
-			if (evt.relatedContext.list.length==2){
-				return false
-			}
+			// if (evt.relatedContext.list.length==2){
+			// 	return false
+			// }
 			return true;
 		},
 		checkMove: function(evt){

examples/script/cancel.js

@@ -172,6 +172,12 @@
           return context
         },
 
+        getVmIndex (domIndex) {
+          const indexes = this.visibleIndexes
+          const numberIndexes = indexes.length
+          return (domIndex > numberIndexes - 1) ? numberIndexes : indexes[domIndex]
+        },
+
         onDragStart (evt) {
           this.context = this.getUnderlyingVm(evt.item)
           evt.item._underlying_vm_ = this.clone(this.context.element)
@@ -183,10 +189,7 @@
             return
           }
           removeNode(evt.item)
-          const indexes = this.visibleIndexes
-          const domNewIndex = evt.newIndex
-          const numberIndexes = indexes.length
-          const newIndex = (domNewIndex > numberIndexes - 1) ? numberIndexes : indexes[domNewIndex]
+          const newIndex = this.getVmIndex(evt.newIndex)
           this.spliceList(newIndex, 0, element)
           this.computeIndexes()
           const added = {element, newIndex}
@@ -210,7 +213,7 @@
           removeNode(evt.item)
           insertNodeAt(evt.from, evt.item, evt.oldIndex)
           const oldIndex = this.context.index
-          const newIndex = this.visibleIndexes[evt.newIndex]
+          const newIndex = this.getVmIndex(evt.newIndex)
           this.updatePosition(oldIndex, newIndex)
           const moved = {element: this.context.element, oldIndex, newIndex}
           this.emitChanges({moved})
@@ -221,7 +224,8 @@
             return 0
           }
           const relatedElement = evt.related;
-          const currentIndex = [...evt.to.children].indexOf(relatedElement)
+          const currentDOMIndex = [...evt.to.children].indexOf(relatedElement)
+          const currentIndex = relatedContext.component.getVmIndex(currentDOMIndex)
           const incialIndex = relatedContext.index
           return (currentIndex !== incialIndex) ? incialIndex+1 : incialIndex
         },