letting vue update dom

David-Desmaisons · David-Desmaisons · commit 68352ed81b22 · 2016-08-04T23:52:19.000-03:00
diff --git a/examples/Two_Lists_NoClone_If.html b/examples/Two_Lists_NoClone_If.html
@@ -0,0 +1,55 @@
+<!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" }}' track-by="$index" v-if="element.id > 2">
+                    {{element.name}} {{$index}}
+                </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" v-if="element.id > 3">{{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="Two_Lists.html">See 2 lists example</a>
+        <a href="Two_Lists_Clone_If.html">See clone v-if element 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/src/vuedragablefor.js b/src/vuedragablefor.js
@@ -72,6 +72,8 @@
               },
               onUpdate: function (evt) {
                 updatePosition(ctx.collection, evt.newIndex, evt.oldIndex);
+                removeNode(evt.item);
+                insertNodeAt(evt.from, evt.item, evt.oldIndex) 
               },
               onAdd: function (evt) {
                 indexes =  computeIndexes(_.chain(evt.to.children).filter(function(elt){return elt!==evt.item;}));
@@ -85,7 +87,9 @@
                   else{
                     var newIndex =  indexes[evt.newIndex];
                     ctx.collection.splice(newIndex, 0, addElement);
-                  }            
+                  }
+                  removeNode(evt.item);
+                  insertNodeAt(evt.from, evt.item, evt.oldIndex)            
                 }
               },
               onRemove: function (evt) {
