adding handler demo

Author: David-Desmaisons

example/App.vue

@@ -62,6 +62,18 @@
             >Header slot</a
           >
         </li>
+
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#handler"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+            >Handler</a
+          >
+        </li>
       </ul>
 
       <div class="tab-content" id="tab-content">
@@ -109,6 +121,15 @@
         >
           <headerslot />
         </div>
+
+        <div
+          class="tab-pane show"
+          id="handler"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <handler />
+        </div>
       </div>
     </div>
   </div>
@@ -120,6 +141,7 @@ import twoLists from "./components/two-lists";
 import clone from "./components/clone";
 import footerslot from "./components/footerslot";
 import headerslot from "./components/headerslot";
+import handler from "./components/handler";
 
 export default {
   name: "app",
@@ -128,7 +150,8 @@ export default {
     twoLists,
     clone,
     footerslot,
-    headerslot
+    headerslot,
+    handler
   }
 };
 </script>

example/components/footerslot.vue

@@ -40,7 +40,7 @@ import draggable from "@/vuedraggable";
 import rawDisplayer from "./raw-displayer.vue";
 let id = 1;
 export default {
-  name: "footer",
+  name: "footer-example",
   components: {
     draggable,
     rawDisplayer

example/components/handler.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="justify-content-center jumbotron">
+    <div class="row">
+      <div class="col-8">
+        <h3>Draggable {{ draggingInfo }}</h3>
+
+        <draggable
+          element="ul"
+          :list="list"
+          class="list-group"
+          :options="{ handle: '.handle' }"
+        >
+          <li
+            class="list-group-item"
+            v-for="element in list"
+            :key="element.name"
+          >
+            <i class="fa fa-align-justify handle"></i>
+
+            {{ element.name }}
+          </li>
+        </draggable>
+      </div>
+
+      <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",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  data() {
+    return {
+      list: [
+        { name: "John", id: 0 },
+        { name: "Joao", id: 1 },
+        { name: "Jean", id: 2 }
+      ],
+      dragging: false
+    };
+  },
+  computed: {
+    draggingInfo() {
+      return this.dragging ? "under drag" : "";
+    }
+  }
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 50px;
+}
+.handle {
+  float: left;
+}
+</style>

example/components/headerslot.vue

@@ -40,7 +40,7 @@ import draggable from "@/vuedraggable";
 import rawDisplayer from "./raw-displayer.vue";
 let id = 1;
 export default {
-  name: "simple",
+  name: "header-example",
   components: {
     draggable,
     rawDisplayer

example/main.js

@@ -1,6 +1,8 @@
 import Vue from "vue";
 import App from "./App.vue";
 import "bootstrap/dist/css/bootstrap.min.css";
+import "font-awesome/css/font-awesome.css";
+
 require("bootstrap");
 
 Vue.config.productionTip = false;

package-lock.json

@@ -29,6 +29,7 @@
     "component-fixture": "^0.4.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "vue-cli-plugin-component": "^1.10.5",
     "vue-template-compiler": "^2.5.21"