Adding new example

pc-david\david.desmaisons · pc-david\david.desmaisons · commit 71e003396e87 · 2017-04-10T18:20:07.000-03:00
diff --git a/examples/Transition_example_3.html b/examples/Transition_example_3.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>Example ul element</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">
+    <div id="areas">
+      <div id="columns">
+        <div class="container-fluid machine-contents list">
+          <draggable :list="jobs" :options="{group:'a', animation:150}" :no-default-animation-on-drag="true" @start="drag=true" @end="drag=false">
+            <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
+              <div v-for="(job, index) in jobs" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
+                <div>
+                  {{ job.jobNumber }}
+                </div>
+                <div>
+                  <br>
+                  <button v-on:click="removeJob(jobs, index)">Remove</button>
+                </div>
+              </div>
+            </transition-group>
+          </draggable>
+        </div>
+
+        <div class="container-fluid machine-contents list">
+          <draggable :list="jobs2" :options="{group:'a', animation:150}" :no-default-animation-on-drag="true" @start="drag=true" @end="drag=false">
+            <transition-group :name="!drag? 'list-complete' : null" :class="{'no' : drag}" :css="true">
+              <div v-for="(job, index) in jobs2" :key="job.jobNumber" :class="drag? 'item' : 'list-complete-item'">
+                <div>
+                  {{ job.jobNumber }}
+                </div>
+                <div>
+                  <br>
+                  <button v-on:click="removeJob(jobs2, index)">Remove</button>
+                </div>
+              </div>
+            </transition-group>
+        </div>
+
+
+      </div>
+    </div>
+    <button v-on:click="add">Add</button>
+  </div>
+  <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
+  <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
+  <script type="text/javascript" src="src\vuedraggable.js"></script>
+  <script type="text/javascript" src="script\transition3.js"></script>
+</body>
+
+</html>
diff --git a/examples/css/main.css b/examples/css/main.css
@@ -48,11 +48,6 @@
   height: 60px;
 }
 
-/*.list-complete-item.no {
-  transition: none !important;
-}*/
-
-
 .list-complete-enter, .list-complete-leave-active {
   opacity: 0;
   height: 0px;
@@ -64,4 +59,21 @@
 .machine-contents {
   margin-top: 10px;
   margin-bottom: 10px;
+  margin-left: 5%;
+  margin-right: 5%;
+  /*width: 45%;*/
 }
+
+#areas {
+  display: flex;
+}
+
+#columns {
+  flex: 1;
+}
+
+#columns>.list {
+  width: 40%;
+  float: left;
+}
+
diff --git a/examples/script/transition3.js b/examples/script/transition3.js
@@ -0,0 +1,37 @@
+var count =323;
+
+var vm = new Vue({
+  el: '#main',
+  name: 'mfgActivity',
+  data: {
+    jobs: [
+      {
+        jobNumber: "14037-12"
+      },
+      {
+        jobNumber: "14038-13"
+      },
+      {
+        jobNumber: "14048-15"
+      }
+    ],
+    jobs2: [
+      {
+        jobNumber: "14055-23"
+      },
+      {
+        jobNumber: "14089-10"
+      }
+    ],
+    drag: false
+  },
+  methods: {
+    removeJob: function (arr, index) {
+      // Remove job from GUI
+      arr.splice(index, 1);
+    },
+    add: function () {
+      this.jobs.push({jobNumber: "14037-"+ count++})
+    }
+  }
+})
