Robust correction for issue #45

Author: pc-david\david.desmaisons

dist/vuedraggable.js

@@ -163,23 +163,23 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
             _this3.visibleIndexes = _computeIndexes(_this3.getChildrenNodes(), _this3.rootContainer.children);
           });
         },
+        getUnderlyingVm: function getUnderlyingVm(htmlElt) {
+          var currentIndex = computeVmIndex(this.getChildrenNodes(), htmlElt);
+          var element = this.list[currentIndex];
+          return { currentIndex: currentIndex, element: element };
+        },
         onDragStart: function onDragStart(evt) {
           if (!this.list) {
-            return;
+            return true;
           }
-          var currentIndex = computeVmIndex(this.getChildrenNodes(), evt.item);
-          var element = this.list[currentIndex];
-          this.context = {
-            currentIndex: currentIndex,
-            element: 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;
         },
         onDragAdd: function onDragAdd(evt) {
           var element = evt.item._underlying_vm_;
           if (!this.list || element === undefined) {
-            return;
+            return true;
           }
           removeNode(evt.item);
           var indexes = this.visibleIndexes;
@@ -192,21 +192,21 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         },
         onDragRemove: function onDragRemove(evt) {
           if (!this.list) {
-            return;
+            return true;
           }
           insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
           var isCloning = !!evt.clone;
           if (isCloning) {
             removeNode(evt.clone);
-            return;
+            return true;
           }
           var oldIndex = this.context.currentIndex;
           this.list.splice(oldIndex, 1);
           return true;
         },
         onDragUpdate: function onDragUpdate(evt) {
           if (!this.list) {
-            return;
+            return true;
           }
           removeNode(evt.item);
           insertNodeAt(evt.from, evt.item, evt.oldIndex);
@@ -217,9 +217,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         },
         onDragMove: function onDragMove(evt) {
           var validate = this.validateMove;
-          if (!validate) {
+          if (!validate || !list) {
             return true;
           }
+
+          var targetComponent = evt.to.__vue__;
+          if (targetComponent) {
+            var destination = targetComponent.getUnderlyingVm(evt.related);
+            console.log('destination', destination);
+          }
+          console.log('source', this.context);
           return validate(evt);
         },
         onDragEnd: function onDragEnd(evt) {

dist/vuedraggable.min.js

@@ -16,17 +16,19 @@ <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}}
+            <draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :validate-move="checkMove">           
+                <li v-for="(element, index) in list" >
+                    {{element.name}}
                 </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>
+                <transition-group tag="div" class="dragArea" name="list-complete">
+                    <div v-for="(element, index) in list2"  :key="element.name" >
+                        {{element.name}}
+                    </div>
+                </transition-group>
              </draggable>
          </div>
 

examples/Cancel.html

@@ -2,16 +2,32 @@ var vm = new Vue({
 	el: "#main",
 	data: {
 		list: [
-			{name: "John"}, 
-			{name: "Joao"}, 
-			{name: "Jean"} 
+			{name: "apple"}, 
+			{name: "banana"}, 
+			{name: "pinapple"},
+			{name: "grape"},
+			{name: "strawberry"},
 		],
 		list2: [],
 		dragging: false
 	},
 	methods:{
 		checkMove: function(evt){
-			return false;
+			console.log(evt)
+
+			if (evt.draggedContext.element.name=='apple'){
+				return false;
+			}
+
+			if (evt.relatedContext.element && evt.relatedContext.element.name=='strawberry'){
+				return false;
+			}
+
+			if (evt.relatedContext.list.length==2){
+				return false;
+			}
+
+			return true;
 		}
 	}
 });

examples/script/cancel.js

@@ -25,20 +25,7 @@
     }
 
     function computeIndexes (slots, children) {
-      if (!slots){
-        return []
-      }
-      return Array.prototype.map.call(children, elt => computeVmIndex(slots, elt))
-    }
-
-    function merge (target, source) {
-      var output = Object(target)
-      for (var nextKey in source) {
-        if (source.hasOwnProperty(nextKey)) {
-          output[nextKey] = source[nextKey]
-        }
-      }
-      return output
+      return (!slots)? [] : Array.prototype.map.call(children, elt => computeVmIndex(slots, elt))
     }
 
     function emit (evtName, evtData) {
@@ -47,17 +34,15 @@
 
     function delegateAndEmit (evtName) {
       return (evtData) => {
-        const res = this['onDrag' + evtName](evtData)
-        if (res) {
-          emit.call(this, evtName, evtData)
-        }    
-        return res  
+        this['onDrag' + evtName](evtData)
+        emit.call(this, evtName, evtData)
       }
     }
 
-    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'Move', 'End'];
+    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
     const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Clone'];
-    const readonlyProperties = eventsListened.concat(eventsToEmit).map(evt => 'on'+evt);
+    const eventsSpecial = []
+    const readonlyProperties = ['Move', ..eventsListened, .. eventsToEmit].map(evt => 'on'+evt);
 
     const props = {
       options: Object,
@@ -109,7 +94,7 @@
           optionsAdded['on' + elt] = emit.bind(this, elt)
         });
 
-        const options = merge(this.options, optionsAdded);
+        const options = Object.assign({}, this.options, optionsAdded, { onMove: evt => {return this.onDragMove(evt);} })
         this._sortable = new Sortable(this.rootContainer, options)
         this.computeIndexes()
       },
@@ -156,19 +141,46 @@
           return {currentIndex, element}
         },
 
+        getUnderlyingPotencialDraggableComponent ({__vue__}) {
+          if (!__vue__){
+            return __vue__
+          }
+
+          if (__vue__.$options._componentTag==="transition-group") {
+            return __vue__.$parent
+          }
+
+          return __vue__
+        },
+
+        getRelatedContextFromMoveEvent({to, related}) {
+          const component = this.getUnderlyingPotencialDraggableComponent(to)
+          if (!component) {
+            return {component}
+          }
+          const list = component.list
+          const context = {list, component}
+          if (to !== related && list && component.getUnderlyingVm) {
+            const destination = component.getUnderlyingVm(related)
+            Object.assign(destination, context)
+            return destination
+          }
+
+          return context
+        },
+
         onDragStart (evt) {
           if (!this.list) {
-            return true
+            return
           }         
           this.context = this.getUnderlyingVm(evt.item)
           evt.item._underlying_vm_ = this.clone(this.context.element)
-          return true
         },
 
         onDragAdd (evt) {
           const element = evt.item._underlying_vm_
           if (!this.list || element === undefined) {
-            return true
+            return
           }
           removeNode(evt.item)
           const indexes = this.visibleIndexes
@@ -177,53 +189,47 @@
           const newIndex = (domNewIndex > numberIndexes - 1) ? numberIndexes : indexes[domNewIndex]
           this.list.splice(newIndex, 0, element)
           this.computeIndexes()
-          return true
         },
 
         onDragRemove (evt) {
           if (!this.list) {
-            return true
+            return
           }
           insertNodeAt(this.rootContainer, evt.item, evt.oldIndex)
           const isCloning = !!evt.clone
           if (isCloning) {
             removeNode(evt.clone)
-            return true
+            return
           }
           const oldIndex = this.context.currentIndex
           this.list.splice(oldIndex, 1)
-          return true
         },
 
         onDragUpdate (evt) {
           if (!this.list) {
-            return true
+            return
           }
           removeNode(evt.item)
           insertNodeAt(evt.from, evt.item, evt.oldIndex)
           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 || !list) {
+          if (!validate || !this.list) {
             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);
+          const relatedContext = this.getRelatedContextFromMoveEvent(evt)
+          const draggedContext = this.context
+          Object.assign(evt, {relatedContext, draggedContext})
+          return validate(evt)
         },
 
         onDragEnd (evt) {
           this.computeIndexes()
-          return true
         }
       }
     }