Improve unbind

Author: David-Desmaisons

.gitignore

@@ -6,4 +6,6 @@ app/bower_components
 test/bower_components
 bower_components
 examples/src
-test/tmp
+test/tmp
+/test/tmp
+/examples/src

build/vuedragablefor.min.js

@@ -18,14 +18,28 @@ <h1>Vue Dragable For</h1>
 
         <a href="index.html">See basic example</a>
 
-        <h2>Dragable list 1</h2>
-        <div>
-            <div v-dragable-for="element in list1" options='{"group":"people"}'>{{element.name}}</div>
+        <div class="drag">
+            <h2>List 1 v-dragable-for</h2>
+            <div class="dragArea">
+                <div v-dragable-for="element in list1" options='{"group":"people"}'>{{element.name}}</div>
+             </div>
+
+            <h2>List 2 v-dragable-for</h2>
+            <div class="dragArea">
+                <div v-dragable-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
+             </div>
          </div>
 
-        <h2>Dragable list 2</h2>
-        <div>
-            <div v-dragable-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
+        <div class="normal">
+            <h2>List 1 v-for</h2>
+            <div>
+                <div v-for="element in list1" options='{"group":"people"}'>{{element.name}}</div>
+             </div>
+
+            <h2>List 2 v-for</h2>
+            <div>
+                <div v-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
+             </div>
          </div>
 
         <button @click="add">Add</button>

examples/complex.html

@@ -0,0 +1,9 @@
+.normal {
+    background-color: grey;
+}
+.drag {
+    background-color: green;
+}
+.dragArea{
+     min-height: 10px;	
+}

examples/css/main.css

@@ -18,14 +18,18 @@ <h1>Vue Dragable For</h1>
 
         <a href="complex.html">See other example</a>
 
-        <h2>Dragable</h2>
-        <div>
-            <div v-dragable-for="element in list">{{element.name}}</div>
+        <div class="drag">
+            <h2>Dragable v-dragable-for</h2>
+            <div class="dragArea">
+                <div v-dragable-for="element in list">{{element.name}}</div>
+             </div>
          </div>
 
-        <h2>Normal</h2>
-        <div>
-            <div v-for="element in list">{{element.name}}</div>
+        <div class="normal">
+            <h2>Normal v-for</h2>
+            <div class="dragArea">
+                <div v-for="element in list">{{element.name}}</div>
+             </div>
          </div>
 
         <button @click="add">Add</button>

examples/index.html

@@ -18,41 +18,37 @@
       bind : function () {    
         var ctx = this;    
         var options = this.params.options;
-        if (typeof options === "string")
-          options = JSON.parse(options);
+        options = (typeof options === "string") ? JSON.parse(options) : options;
         options = _.merge(options,{
           onUpdate: function (evt) {
               var collection = ctx.collection;
               if (!!collection)
                 collection.splice(evt.newIndex, 0, collection.splice(evt.oldIndex, 1)[0] );
           },
           onAdd: function (evt) {
-              var itemEl = evt.item;  // dragged HTMLElement
-              var directive = evt.from.__directive;  // previous list
-              if (!directive)
-                return;
-             ctx.collection.splice(evt.newIndex, 0, directive.collection[evt.oldIndex]);
+              var directive = evt.from.__directive;
+              if ((!!directive) && (!!ctx.collection))
+                ctx.collection.splice(evt.newIndex, 0, directive.collection[evt.oldIndex]);
           },
           onRemove: function (evt) {
+            if (!!ctx.collection)
+              ctx.collection.splice(evt.oldIndex, 1);
           }
         });
-        var parent = this.el.parentElement;
+        var parent = (!!this.params.root) ? document.getElementById(this.params.root) : this.el.parentElement;
         parent.__directive = this;
-        console.log(options);
-        //var option =
         this.sortable = new Sortable(parent, options);
       },
       update : function (value){
-
-        if ((value!==null) && (!Array.isArray(value)))
+        if ((!!value) && (!Array.isArray(value)))
           throw new Error('should received an Array');
 
-        console.log('update', value);
         this.collection = value;
       },
-      unbind : function (){}
+      unbind : function (){
+        this.sortable.destroy();
+      }
    });
 
   Vue.directive('dragable-for', dragableForDirective);
-
 })();