WIP: futureindex improvement

Author: David-Desmaisons

bower.json

@@ -25,6 +25,6 @@
   ],
   "dependencies": {
     "vue": "^2.0.2",
-    "Sortable": "^1.5.1"
+    "Sortable": "^1.6.0"
   }
 }

dist/vuedraggable.js

@@ -1,4 +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); } }
@@ -119,7 +122,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
         this.componentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
         if (this.componentMode && this.transitionMode) {
-          throw new Error('Transition-group inside component is not suppported. Please alter element value or remove transition-group. Current element value: ' + this.element);
+          throw new Error('Transition-group inside component is not supported. Please alter element value or remove transition-group. Current element value: ' + this.element);
         }
         var optionsAdded = {};
         eventsListened.forEach(function (elt) {
@@ -306,11 +309,15 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
           if (!relatedContext.element) {
             return 0;
           }
-          var domChildren = [].concat(_toConsumableArray(evt.to.children));
+          var domChildren = [].concat(_toConsumableArray(evt.to.children)).filter(function (el) {
+            return el.style['display'] !== 'none';
+          });
           var currentDOMIndex = domChildren.indexOf(evt.related);
           var currentIndex = relatedContext.component.getVmIndex(currentDOMIndex);
           var draggedInList = domChildren.indexOf(draggingElement) != -1;
-          return draggedInList ? currentIndex : currentIndex + 1;
+          console.log(draggedInList, evt.willInsertAfter, currentDOMIndex, currentIndex);
+          // return (draggedInList || !evt.willInsertAfter) ? currentIndex : currentIndex + 1          
+          return evt.willInsertAfter ? currentIndex + 1 : currentIndex;
         },
         onDragMove: function onDragMove(evt) {
           var onMove = this.move;
@@ -334,7 +341,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

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