Add transition example

Author: David-Desmaisons

example/App.vue

@@ -1,8 +1,14 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
+    <img
+      alt="Vue logo"
+      src="./assets/logo.png"
+    />
     <div class="container ">
-      <ul class="nav nav-tabs" role="tablist">
+      <ul
+        class="nav nav-tabs"
+        role="tablist"
+      >
         <li class="nav-item">
           <a
             class="nav-link active"
@@ -11,8 +17,7 @@
             role="tab"
             aria-controls="profile"
             aria-selected="true"
-            >Simple</a
-          >
+          >Simple</a>
         </li>
 
         <li class="nav-item">
@@ -23,8 +28,7 @@
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-            >Two Lists</a
-          >
+          >Two Lists</a>
         </li>
 
         <li class="nav-item">
@@ -35,48 +39,59 @@
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-            >Clone</a
-          >
+          >Clone</a>
         </li>
 
         <li class="nav-item">
           <a
             class="nav-link"
             data-toggle="tab"
-            href="#footerslot"
+            href="#handler"
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-            >Footer slot</a
-          >
+          >Handler</a>
         </li>
 
         <li class="nav-item">
           <a
             class="nav-link"
             data-toggle="tab"
-            href="#headerlot"
+            href="#transition"
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-            >Header slot</a
-          >
+          >Transition</a>
         </li>
 
         <li class="nav-item">
           <a
             class="nav-link"
             data-toggle="tab"
-            href="#handler"
+            href="#footerslot"
             role="tab"
             aria-controls="profile"
             aria-selected="false"
-            >Handler</a
-          >
+          >Footer slot</a>
         </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#headerslot"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+          >Header slot</a>
+        </li>
+
       </ul>
 
-      <div class="tab-content" id="tab-content">
+      <div
+        class="tab-content"
+        id="tab-content"
+      >
         <div
           class="tab-pane show active"
           id="simple"
@@ -115,7 +130,7 @@
 
         <div
           class="tab-pane show"
-          id="headerlot"
+          id="headerslot"
           role="tabpanel"
           aria-labelledby="profile-tab"
         >
@@ -130,6 +145,15 @@
         >
           <handler />
         </div>
+
+        <div
+          class="tab-pane show"
+          id="transition"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <transition-example />
+        </div>
       </div>
     </div>
   </div>
@@ -142,6 +166,7 @@ import clone from "./components/clone";
 import footerslot from "./components/footerslot";
 import headerslot from "./components/headerslot";
 import handler from "./components/handler";
+import transitionExample from "./components/transition-example";
 
 export default {
   name: "app",
@@ -151,7 +176,8 @@ export default {
     clone,
     footerslot,
     headerslot,
-    handler
+    handler,
+    transitionExample
   }
 };
 </script>

example/components/footerslot.vue

@@ -7,11 +7,12 @@
         <draggable
           :list="list"
           class="list-group"
+          :options="{ draggable: '.item' }"
           @start="dragging = true"
           @end="dragging = false"
         >
           <div
-            class="list-group-item"
+            class="list-group-item item"
             v-for="element in list"
             :key="element.name"
           >

example/components/handler.vue

@@ -22,21 +22,16 @@
         </draggable>
       </div>
 
-      <rawDisplayer
-        class="col-3"
-        :value="list"
-        title="List"
-      />
+      <rawDisplayer class="col-3" :value="list" title="List" />
     </div>
   </div>
 </template>
 
 <script>
 import draggable from "@/vuedraggable";
 import rawDisplayer from "./raw-displayer.vue";
-let id = 1;
 export default {
-  name: "header",
+  name: "handler",
   components: {
     draggable,
     rawDisplayer

example/components/headerslot.vue

@@ -7,11 +7,12 @@
         <draggable
           :list="list"
           class="list-group"
+          :options="{ draggable: '.item' }"
           @start="dragging = true"
           @end="dragging = false"
         >
           <div
-            class="list-group-item"
+            class="list-group-item item"
             v-for="element in list"
             :key="element.name"
           >

example/components/transition-example.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="justify-content-center jumbotron">
+    <div class="row">
+
+      <div class="col-2">
+        <button
+          class="btn btn-secondary button"
+          @click="sort"
+        >To original order</button>
+      </div>
+
+      <div class="col-6">
+        <h3>Transition</h3>
+        <draggable
+          class="list-group"
+          element="ul"
+          v-model="list"
+          :options="dragOptions"
+          @start="isDragging = true"
+          @end="isDragging = false"
+        >
+          <transition-group
+            type="transition"
+            :name="'flip-list'"
+          >
+            <li
+              class="list-group-item"
+              v-for="element in list"
+              :key="element.order"
+            >
+              <i
+                :class="
+                element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
+              "
+                @click="element.fixed = !element.fixed"
+                aria-hidden="true"
+              ></i>
+              {{ element.name }}
+            </li>
+          </transition-group>
+        </draggable>
+      </div>
+
+      <rawDisplayer
+        class="col-3"
+        :value="list"
+        title="List"
+      />
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+import rawDisplayer from "./raw-displayer.vue";
+
+const message = [
+  "vue.draggable",
+  "draggable",
+  "component",
+  "for",
+  "vue.js 2.0",
+  "based",
+  "on",
+  "Sortablejs"
+];
+
+export default {
+  name: "tranistion-example",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  data() {
+    return {
+      list: message.map((name, index) => {
+        return { name, order: index + 1, fixed: false };
+      })
+    };
+  },
+  methods:{
+    sort(){
+      this.list = this.list.sort((a,b) => a.order - b.order);
+    }
+  },
+  computed: {
+    dragOptions() {
+      return {
+        animation: 0,
+        group: "description",
+        disabled: false,
+        ghostClass: "ghost"
+      };
+    }
+  }
+};
+</script>
+
+<style>
+.button {
+  margin-top: 50px;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.list-group {
+  min-height: 20px;
+}
+
+.list-group-item {
+  cursor: move;
+}
+
+.list-group-item i {
+  cursor: pointer;
+}
+</style>