Including complex example

pc-david\david.desmaisons · pc-david\david.desmaisons · commit 8b5361b702d9 · 2016-06-28T13:56:01.000-03:00
diff --git a/examples/complex.html b/examples/complex.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Example</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Place favicon.ico in the root directory -->
+
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+     
+     <div id="main">
+        <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>
+
+        <h2>Dragable list 2</h2>
+        <div>
+            <div v-dragable-for="element in list2" options='{"group":"people"}'>{{element.name}}</div>
+         </div>
+
+        <button @click="add">Add</button>
+        <button @click="replace">Replace</button>
+
+        <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/index.html b/examples/index.html
@@ -15,6 +15,8 @@
      
      <div id="main">
         <h1>Vue Dragable For</h1>
+
+        <a href="complex.html">See other example</a>
        
         <h2>Dragable</h2>
         <div>
diff --git a/examples/script/complex.js b/examples/script/complex.js
@@ -0,0 +1,19 @@
+var vm = new Vue({
+	el: "#main",
+	data: {
+		list1:[{name:"John"}, 
+				{name:"Joao"}, 
+				{name:"Jean"} ],
+		list2:[{name:"Juan"}, 
+				{name:"Edgard"}, 
+				{name:"Johnson"} ]
+		},
+	methods:{
+			add: function(){
+				this.list.push({name:'Juan'});
+			},
+			replace: function(){
+				this.list=[{name:'Edgard'}]
+			}
+		}
+	});
diff --git a/examples/src/vuedragablefor.js b/examples/src/vuedragablefor.js
@@ -17,15 +17,27 @@
    mix(dragableForDirective, {
       bind : function () {    
         var ctx = this;    
-        var option ={
-            onEnd: function (evt) {
+        var options = this.params.options;
+        if (typeof options === "string")
+          options = JSON.parse(options);
+        console.log(options);
+        options = _.merge(options,{
+          onUpdate: function (evt) {
               console.log(evt.oldIndex, evt.newIndex);
               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
+              evt.from;  // previous list
+          },
+          onRemove: function (evt) {
           }
-        };
-        this.sortable = new Sortable(this.el.parentElement, option);
+        });
+        console.log(options);
+        //var option =
+        this.sortable = new Sortable(this.el.parentElement, options);
       },
       update : function (value){
 
diff --git a/src/vuedragablefor.js b/src/vuedragablefor.js
@@ -17,15 +17,27 @@
    mix(dragableForDirective, {
       bind : function () {    
         var ctx = this;    
-        var option ={
-            onEnd: function (evt) {
+        var options = this.params.options;
+        if (typeof options === "string")
+          options = JSON.parse(options);
+        console.log(options);
+        options = _.merge(options,{
+          onUpdate: function (evt) {
               console.log(evt.oldIndex, evt.newIndex);
               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
+              evt.from;  // previous list
+          },
+          onRemove: function (evt) {
           }
-        };
-        this.sortable = new Sortable(this.el.parentElement, option);
+        });
+        console.log(options);
+        //var option =
+        this.sortable = new Sortable(this.el.parentElement, options);
       },
       update : function (value){
 
