Use correct event to recalculate index (watch list instead of update) + DRY on test list on event

pc-david\david.desmaisons · pc-david\david.desmaisons · commit e732dfbb5600 · 2016-12-23T10:47:53.000-02:00
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
@@ -72,7 +72,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         type: String,
         default: 'div'
       },
-      validateMove: {
+      move: {
         type: Function,
         default: null
       }
@@ -179,8 +179,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
           var context = { list: list, component: component };
           if (to !== related && list && component.getUnderlyingVm) {
             var destination = component.getUnderlyingVm(related);
-            Object.assign(destination, context);
-            return destination;
+            return Object.assign(destination, context);
           }
 
           return context;
@@ -229,15 +228,15 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
           updatePosition(this.list, oldIndexVM, newIndexVM);
         },
         onDragMove: function onDragMove(evt) {
-          var validate = this.validateMove;
-          if (!validate || !this.list) {
+          var onMove = this.move;
+          if (!onMove || !this.list) {
             return true;
           }
 
           var relatedContext = this.getRelatedContextFromMoveEvent(evt);
           var draggedContext = this.context;
           Object.assign(evt, { relatedContext: relatedContext, draggedContext: draggedContext });
-          return validate(evt);
+          return onMove(evt);
         },
         onDragEnd: function onDragEnd(evt) {
           this.computeIndexes();
diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
diff --git a/examples/Cancel.html b/examples/Cancel.html
@@ -12,23 +12,23 @@
     <body>
      
      <div id="main">
-        <h1>Vue Dragable</h1>
+        <h1>Cancel Example</h1>
 
-       <!--  <div class="status">
+        <div class="status">
             <p v-if="canDrag!=null"  :class="canDrag? 'ok' : 'ko'">
                 can Drag: {{canDrag}}
             </p>
             <p v-else>
                 No drag operation
             </p>
-        </div> -->
+        </div>
         
 
         <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}"> -->
+                <li v-for="(element, index) in list" :class="{'target': element===targetElement}">
+                <!--  > -->
                     {{element.name}}
                 </li>
              </draggable>
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
@@ -34,7 +34,9 @@
 
     function delegateAndEmit (evtName) {
       return (evtData) => {
-        this['onDrag' + evtName](evtData)
+        if (this.list!==null) {
+          this['onDrag' + evtName](evtData)
+        }
         emit.call(this, evtName, evtData)
       }
     }
@@ -102,10 +104,6 @@
         this._sortable.destroy()
       },
 
-      updated () {
-        this.computeIndexes()
-      },
-
       computed : {
         rootContainer () {
           return this.transitionMode? this.$el.children[0] : this.$el;
@@ -119,6 +117,10 @@
               this._sortable.option(property, newOptionValue[property] );
             }        
           }         
+        },
+
+        list(){
+          this.computeIndexes()
         }
       },
 
@@ -167,17 +169,14 @@
           return context
         },
 
-        onDragStart (evt) {
-          if (!this.list) {
-            return
-          }         
+        onDragStart (evt) {      
           this.context = this.getUnderlyingVm(evt.item)
           evt.item._underlying_vm_ = this.clone(this.context.element)
         },
 
         onDragAdd (evt) {
           const element = evt.item._underlying_vm_
-          if (!this.list || element === undefined) {
+          if (element === undefined) {
             return
           }
           removeNode(evt.item)
@@ -190,9 +189,6 @@
         },
 
         onDragRemove (evt) {
-          if (!this.list) {
-            return
-          }
           insertNodeAt(this.rootContainer, evt.item, evt.oldIndex)
           const isCloning = !!evt.clone
           if (isCloning) {
@@ -204,9 +200,6 @@
         },
 
         onDragUpdate (evt) {
-          if (!this.list) {
-            return
-          }
           removeNode(evt.item)
           insertNodeAt(evt.from, evt.item, evt.oldIndex)
           const oldIndexVM = this.context.currentIndex
