WIP: cancelation

Author: David-Desmaisons

dist/vuedraggable.js

@@ -57,13 +57,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       var _this = this;
 
       return function (evtData) {
-        _this['onDrag' + evtName](evtData);
-        emit.call(_this, evtName, evtData);
+        var res = _this['onDrag' + evtName](evtData);
+        if (res) {
+          emit.call(_this, evtName, evtData);
+        }
+        return res;
       };
     }
 
-    var eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
-    var eventsToEmit = ['Choose', 'Sort', 'Filter', 'Move', 'Clone'];
+    var eventsListened = ['Start', 'Add', 'Remove', 'Update', 'Move', 'End'];
+    var eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
     var readonlyProperties = eventsListened.concat(eventsToEmit).map(function (evt) {
       return 'on' + evt;
     });
@@ -84,6 +87,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       element: {
         type: String,
         default: 'div'
+      },
+      validateMove: {
+        type: Function,
+        default: null
       }
     };
 
@@ -167,6 +174,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
             element: element
           };
           evt.item._underlying_vm_ = this.clone(element);
+          return true;
         },
         onDragAdd: function onDragAdd(evt) {
           var element = evt.item._underlying_vm_;
@@ -180,6 +188,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
           var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes[domNewIndex];
           this.list.splice(newIndex, 0, element);
           this.computeIndexes();
+          return true;
         },
         onDragRemove: function onDragRemove(evt) {
           if (!this.list) {
@@ -193,6 +202,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
           }
           var oldIndex = this.context.currentIndex;
           this.list.splice(oldIndex, 1);
+          return true;
         },
         onDragUpdate: function onDragUpdate(evt) {
           if (!this.list) {
@@ -203,9 +213,18 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
           var oldIndexVM = this.context.currentIndex;
           var newIndexVM = this.visibleIndexes[evt.newIndex];
           updatePosition(this.list, oldIndexVM, newIndexVM);
+          return true;
+        },
+        onDragMove: function onDragMove(evt) {
+          var validate = this.validateMove;
+          if (!validate) {
+            return true;
+          }
+          return validate(evt);
         },
         onDragEnd: function onDragEnd(evt) {
           this.computeIndexes();
+          return true;
         }
       }
     };

dist/vuedraggable.min.js

@@ -21,13 +21,25 @@ <h2>List 1 draggable</h2>
                     {{element.name}} {{index}}
                 </li>
              </draggable>
+
+           <h2>List 2 draggable</h2>
+            <draggable class="dragArea" :list="list2" :options="{group:'people'}">
+                <div v-for="(element, index) in list2"  >
+                    {{element.name}} {{index}}
+                </div>
+             </draggable>
          </div>
 
         <div class="normal">
             <h2>List 1 v-for</h2>
             <div>
                 <div v-for="element in list" >{{element.name}}</div>
              </div>
+
+            <h2>List 2 v-for</h2>
+            <div>
+                <div v-for="element in list2" >{{element.name}}</div>
+             </div>
         </div>
 
         <a href="index.html">See basic example</a>

examples/Cancel.html

@@ -1,14 +1,16 @@
 var vm = new Vue({
 	el: "#main",
 	data: {
-		list: [ {name: "John"}, 
-				{name: "Joao"}, 
-				{name: "Jean"} ],
+		list: [
+			{name: "John"}, 
+			{name: "Joao"}, 
+			{name: "Jean"} 
+		],
+		list2: [],
 		dragging: false
 	},
 	methods:{
 		checkMove: function(evt){
-			console.log(evt);
 			return false;
 		}
 	}

examples/script/cancel.js

@@ -150,17 +150,18 @@
           })
         },
 
+        getUnderlyingVm (htmlElt) {
+          const currentIndex = computeVmIndex(this.getChildrenNodes(), htmlElt)
+          const element = this.list[currentIndex]
+          return {currentIndex, element}
+        },
+
         onDragStart (evt) {
           if (!this.list) {
             return
           }         
-          const currentIndex = computeVmIndex(this.getChildrenNodes(), evt.item)
-          const element = this.list[currentIndex]
-          this.context = {
-            currentIndex,
-            element
-          }
-          evt.item._underlying_vm_ = this.clone(element)
+          this.context = this.getUnderlyingVm(evt.item)
+          evt.item._underlying_vm_ = this.clone(this.context.element)
           return true
         },
 
@@ -208,9 +209,14 @@
 
         onDragMove (evt) {
           const validate = this.validateMove
-          if (!validate){
-            return true;
+          if (!validate) {
+            return true
+          }
+          if (evt.to === evt.from) {
+            const destination = this.getUnderlyingVm(evt.related)
+            console.log('destination', destination)
           }
+          console.log('source', this.context)
           return validate(evt);
         },