Working on cancel: issue #45

pc-david\david.desmaisons · pc-david\david.desmaisons · commit a27ef3a1d701 · 2016-12-21T18:57:10.000-02:00
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
@@ -212,7 +212,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
     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) {
diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
diff --git a/examples/Cancel.html b/examples/Cancel.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Example ul element</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+     
+     <div id="main">
+        <h1>Vue Dragable</h1>
+
+        <div class="drag">
+            <h2>List 1 draggable</h2>
+            <draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :validate-move="checkMove">
+                <li v-for="(element, index) in list"  >
+                    {{element.name}} {{index}}
+                </li>
+             </draggable>
+         </div>
+
+        <div class="normal">
+            <h2>List 1 v-for</h2>
+            <div>
+                <div v-for="element in list" >{{element.name}}</div>
+             </div>
+        </div>
+
+        <a href="index.html">See basic example</a>
+        <a href="Two_Lists_Clone.html">See clone element example</a>
+        <a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
+    </div>
+      <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
+        <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
+        <script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
+        <script type="text/javascript" src="src\vuedraggable.js"></script>
+        <script type="text/javascript" src="script\cancel.js"></script>
+    </body>
+</html>
diff --git a/examples/script/cancel.js b/examples/script/cancel.js
@@ -0,0 +1,15 @@
+var vm = new Vue({
+	el: "#main",
+	data: {
+		list: [ {name: "John"}, 
+				{name: "Joao"}, 
+				{name: "Jean"} ],
+		dragging: false
+	},
+	methods:{
+		checkMove: function(evt){
+			console.log(evt);
+			return false;
+		}
+	}
+});
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
@@ -47,13 +47,16 @@
 
     function delegateAndEmit (evtName) {
       return (evtData) => {
-        this['onDrag' + evtName](evtData)
-        emit.call(this, evtName, evtData)
+        const res = this['onDrag' + evtName](evtData)
+        if (res) {
+          emit.call(this, evtName, evtData)
+        }    
+        return res  
       }
     }
 
-    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
-    const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Move', 'Clone'];
+    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'Move', 'End'];
+    const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
     const readonlyProperties = eventsListened.concat(eventsToEmit).map(evt => 'on'+evt);
   
     const props = {
@@ -70,6 +73,10 @@
       element: {
         type: String,
         default: 'div'
+      },
+      validateMove: {
+        type: Function,
+        default: null
       }
     }
 
@@ -154,6 +161,7 @@
             element
           }
           evt.item._underlying_vm_ = this.clone(element)
+          return true
         },
 
         onDragAdd (evt) {
@@ -168,6 +176,7 @@
           const newIndex = (domNewIndex > numberIndexes - 1) ? numberIndexes : indexes[domNewIndex]
           this.list.splice(newIndex, 0, element)
           this.computeIndexes()
+          return true
         },
 
         onDragRemove (evt) {
@@ -182,6 +191,7 @@
           }
           const oldIndex = this.context.currentIndex
           this.list.splice(oldIndex, 1)
+          return true
         },
 
         onDragUpdate (evt) {
@@ -193,10 +203,20 @@
           const oldIndexVM = this.context.currentIndex
           const newIndexVM = this.visibleIndexes[evt.newIndex]
           updatePosition(this.list, oldIndexVM, newIndexVM)
+          return true
+        },
+
+        onDragMove (evt) {
+          const validate = this.validateMove
+          if (!validate){
+            return true;
+          }
+          return validate(evt);
         },
 
         onDragEnd (evt) {
           this.computeIndexes()
+          return true
         }
       }
     }    

Original file line number	Diff line number	Diff line change
`@@ -212,7 +212,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol`
`212`	`212`	`return draggableComponent;`
`213`	`213`	`}`
`214`	`214`
`215`		`- if (typeof exports == "object") {`
	`215`	`+ if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) == "object") {`
`216`	`216`	`var Sortable = require("sortablejs");`
`217`	`217`	`module.exports = buildDraggable(Sortable);`
`218`	`218`	`} else if (typeof define == "function" && define.amd) {`