Fix: issue#7

SortableJS · Jul 25, 2016 · cf9d749 · cf9d749
1 parent f89f709
commit cf9d749
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 10 deletions.
diff --git a/examples/complex-clone.html b/examples/complex-clone.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Example two lists clone</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 For</h1>
+
+        <div class="drag">
+            <h2>List 1 v-dragable-for</h2>
+            <div id="list1" class="dragArea" >
+                <div v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone", "put":false }}' track-by="$index">
+                    {{element.name}}
+                </div>
+             </div>
+
+            <h2>List 2 v-dragable-for</h2>
+            <div id="list2" class="dragArea">
+                <div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
+             </div>
+         </div>
+
+        <div class="normal">
+            <h2>List 1 v-for</h2>
+            <div>
+                <div v-for="element in list1" track-by="$index">{{element.name}}</div>
+             </div>
+
+            <h2>List 2 v-for</h2>
+            <div>
+                <div v-for="element in list2" track-by="$index">{{element.name}}</div>
+            </div>
+        </div>
+
+        <a href="index.html">See basic example</a>
+        <a href="complex.html">See 2 lists example</a>
+
+        <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\vuedragablefor.js"></script>
+        <script type="text/javascript" src="script\complex.js"></script>
+
+    </div>
+    </body>
+</html>
diff --git a/examples/complex.html b/examples/complex.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>Example</title>
+        <title>Example two lists</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -17,9 +17,9 @@ <h1>Vue Dragable For</h1>
         <div class="drag">
             <h2>List 1 v-dragable-for</h2>
             <div class="dragArea" >
-                <template v-dragable-for="element in list1" options='{"group":"people"}'>
-                    <p>{{element.name}}</p>
-                </template>
+                <div v-dragable-for="element in list1" options='{"group":"people"}'>
+                    {{element.name}}
+                </div>
              </div>
 
             <h2>List 2 v-dragable-for</h2>
@@ -31,16 +31,17 @@ <h2>List 2 v-dragable-for</h2>
         <div class="normal">
             <h2>List 1 v-for</h2>
             <div>
-                <div v-for="element in list1" options='{"group":"people"}'>{{element.name}}</div>
+                <div v-for="element in list1" >{{element.name}}</div>
              </div>
 
             <h2>List 2 v-for</h2>
             <div>
-                <div v-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
+                <div v-for="element in list2" >{{element.name}}</div>
             </div>
         </div>
 
         <a href="index.html">See basic example</a>
+        <a href="complex-clone.html">See clone element example</a>
 
         <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
         <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>

diff --git a/examples/index.html b/examples/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>Example</title>
+        <title>Basic example</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -34,6 +34,7 @@ <h2>Normal v-for</h2>
         <br>
 
         <a href="complex.html">See 2 lists example</a>
+        <a href="complex-clone.html">See clone element example</a>
 
         <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
         <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>

diff --git a/src/vuedragablefor.js b/src/vuedragablefor.js
@@ -28,14 +28,25 @@
                 if (!!collection)
                   collection.splice(evt.newIndex, 0, collection.splice(evt.oldIndex, 1)[0] );
               },
-              onAdd: function (evt) {
+               onAdd: function (evt) {
                 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 collection = ctx.collection;
+                if (!!collection && !evt.clone)
+                  collection.splice(evt.oldIndex, 1);
+                if (!!evt.clone){
+                  //if cloning mode: replace cloned element by orginal element (with original vue binding information)+
+                  //re-order element as sortablejs may re-order without sending events 
+                  var newIndex = Array.prototype.indexOf.call(evt.from.children, evt.clone), oldIndex = evt.oldIndex;
+                  evt.from.replaceChild(evt.item, evt.clone);
+                  if (!!collection && (newIndex != oldIndex)){
+                    var item = collection.splice(oldIndex, 1);
+                    collection.splice(newIndex, 0, item[0]);
+                  }
+                }
               }
             });
             var parent = (!!this.params.root) ? document.getElementById(this.params.root) : this.el.parentElement;