Experimental correction for issue #63

Author: David-Desmaisons

dist/vuedraggable.js

@@ -228,6 +228,15 @@
           var moved = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
           this.emitChanges({ moved: moved });
         },
+        computeFutureIndex: function computeFutureIndex(relatedContext, evt) {
+          if (!relatedContext.element) {
+            return 0;
+          }
+          var relatedElement = evt.related;
+          var currentIndex = [].concat(_toConsumableArray(evt.to.children)).indexOf(relatedElement);
+          var incialIndex = relatedContext.index;
+          return currentIndex !== incialIndex ? incialIndex + 1 : incialIndex;
+        },
         onDragMove: function onDragMove(evt) {
           var onMove = this.move;
           if (!onMove || !this.list) {
@@ -236,6 +245,8 @@
 
           var relatedContext = this.getRelatedContextFromMoveEvent(evt);
           var draggedContext = this.context;
+          var futureIndex = this.computeFutureIndex(relatedContext, evt);
+          Object.assign(draggedContext, { futureIndex: futureIndex });
           Object.assign(evt, { relatedContext: relatedContext, draggedContext: draggedContext });
           return onMove(evt);
         },
@@ -247,7 +258,7 @@
     return draggableComponent;
   }
 
-  if (typeof exports == "object") {
+   if (typeof exports == "object") {
     var Sortable = require("sortablejs");
     module.exports = buildDraggable(Sortable);
   } else if (typeof define == "function" && define.amd) {

dist/vuedraggable.min.js

@@ -16,7 +16,7 @@ <h1>Cancel Example</h1>
 
         <div class="status">
             <p v-if="canDrag!=null"  :class="canDrag? 'ok' : 'ko'">
-                can Drag: {{canDrag}}
+                can Drag: {{canDrag}} future index {{futureIndex}}
             </p>
             <p v-else>
                 No drag operation
@@ -26,9 +26,9 @@ <h1>Cancel Example</h1>
 
         <div class="drag">
             <h2>List 1 draggable</h2>
-            <draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :move="checkMove" @end="endDrag">           
-                <li v-for="(element, index) in list" :class="{'target': element===targetElement}">
-                    {{element.name}}
+            <draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :move="checkMove" @end="endDrag" @start="startDrag">           
+                <li v-for="(element, index) in list" :class="{'target': element===targetElement, 'ok':canDrag  , 'ko':!canDrag}">
+                    {{element.name}} {{index}}
                 </li>
              </draggable>
 

examples/Cancel.html

@@ -12,8 +12,12 @@
 	background-color: blue;
 }
 
-.target {
-  background-color: yellow;
+.target.ok {
+  background-color: blue;
+}
+
+.target.ko {
+  background-color: red;
 }
 
 .status {

examples/css/main.css

@@ -7,34 +7,53 @@ var vm = new Vue({
 			{name: "pinapple"},
 			{name: "grape"},
 			{name: "strawberry"},
+			{name: 'odd'},
+			{name: 'pair'}
 		],
 		list2: [],
 		dragging: false,
 		targetElement: null,
-		canDrag:null
+		canDrag:null,
+		futureIndex:null
 	},
 	methods:{
-		checkMove: function(evt){
-			var res = true
+		privateCheckMove: function(evt){
 			this.targetElement = evt.relatedContext.element
 
+			if (evt.draggedContext.element.name=='odd'){
+				return evt.draggedContext.futureIndex % 2 === 1
+			}
+
+			if (evt.draggedContext.element.name=='pair'){
+				return evt.draggedContext.futureIndex % 2 === 0
+			}
+
 			if (evt.draggedContext.element.name=='apple'){
-				res = false
+				return false
 			}
 
 			if (evt.relatedContext.element && evt.relatedContext.element.name=='strawberry'){
-				res = false
+				return false
 			}
 
 			if (evt.relatedContext.list.length==2){
-				res = false
+				return false
 			}
+			return true;
+		},
+		checkMove: function(evt){
+			res = this.privateCheckMove(evt)
 			this.canDrag=res;
+			this.futureIndex = evt.draggedContext.futureIndex;
 			return res;
 		},
 		endDrag: function () {
 			this.canDrag=null;
 			this.targetElement=null;
+			this.futureIndex =null;
+		},
+		startDrag: function (evt) {
+			console.log(evt)
 		}
 	}
 });

examples/script/cancel.js

@@ -35,9 +35,9 @@
       }
     }
 
-    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
-    const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
-    const readonlyProperties = ['Move', ...eventsListened, ...eventsToEmit].map(evt => 'on'+evt);
+    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End']
+    const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone']
+    const readonlyProperties = ['Move', ...eventsListened, ...eventsToEmit].map(evt => 'on'+evt)
 
     const props = {
       options: Object,
@@ -172,7 +172,7 @@
           return context
         },
 
-        onDragStart (evt) {      
+        onDragStart (evt) {
           this.context = this.getUnderlyingVm(evt.item)
           evt.item._underlying_vm_ = this.clone(this.context.element)
         },
@@ -216,6 +216,16 @@
           this.emitChanges({moved})
         },
 
+        computeFutureIndex (relatedContext, evt) {
+          if (!relatedContext.element){
+            return 0
+          }
+          const relatedElement = evt.related;
+          const currentIndex = [...evt.to.children].indexOf(relatedElement)
+          const incialIndex = relatedContext.index
+          return (currentIndex !== incialIndex) ? incialIndex+1 : incialIndex
+        },
+
         onDragMove (evt) {
           const onMove = this.move
           if (!onMove || !this.list) {
@@ -224,6 +234,8 @@
 
           const relatedContext = this.getRelatedContextFromMoveEvent(evt)
           const draggedContext = this.context
+          const futureIndex = this.computeFutureIndex(relatedContext, evt)
+          Object.assign(draggedContext, { futureIndex })
           Object.assign(evt, {relatedContext, draggedContext})
           return onMove(evt)
         },