Update example

Author: David-Desmaisons

example/App.vue

@@ -42,6 +42,17 @@
           >Clone</a>
         </li>
 
+        <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#custom-clone"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+          >Custom Clone</a>
+        </li>
+
         <li class="nav-item">
           <a
             class="nav-link"
@@ -129,6 +140,15 @@
           <clone />
         </div>
 
+        <div
+          class="tab-pane show"
+          id="custom-clone"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <custom-clone />
+        </div>
+
         <div
           class="tab-pane show"
           id="footerslot"
@@ -182,6 +202,7 @@
 import simple from "./components/simple";
 import twoLists from "./components/two-lists";
 import clone from "./components/clone";
+import customClone from "./components/custom-clone";
 import footerslot from "./components/footerslot";
 import headerslot from "./components/headerslot";
 import handler from "./components/handler";
@@ -194,6 +215,7 @@ export default {
     simple,
     twoLists,
     clone,
+    customClone,
     footerslot,
     headerslot,
     handler,

example/components/clone.vue

@@ -2,7 +2,7 @@
   <div class=" justify-content-center jumbotron">
     <div class="row">
       <div class="col-3">
-        <h3>Draggable for list 1</h3>
+        <h3>Draggable 1</h3>
         <draggable
           class="dragArea list-group"
           :list="list1"
@@ -14,13 +14,13 @@
             v-for="(element, index) in list1"
             :key="element.name"
           >
-            {{ element.name }} {{ index }}
+            {{ element.name }}
           </div>
         </draggable>
       </div>
 
       <div class="col-3">
-        <h3>Draggable for list 2</h3>
+        <h3>Draggable 2</h3>
         <draggable
           class="dragArea list-group"
           :list="list2"
@@ -32,7 +32,7 @@
             v-for="(element, index) in list2"
             :key="element.name"
           >
-            {{ element.name }} {{ index }}
+            {{ element.name }}
           </div>
         </draggable>
       </div>

example/components/custom-clone.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class=" justify-content-center jumbotron">
+    <div class="row">
+      <div class="col-3">
+        <h3>Draggable 1</h3>
+        <draggable
+          class="dragArea list-group"
+          :list="list1"
+          :options="{ group: { name: 'people', pull: 'clone', put: false} }"
+          :clone="cloneDog"
+          @change="log"
+        >
+          <div
+            class="list-group-item"
+            v-for="(element, index) in list1"
+            :key="element.id"
+          >
+            {{ element.name }}
+          </div>
+        </draggable>
+      </div>
+
+      <div class="col-3">
+        <h3>Draggable 2</h3>
+        <draggable
+          class="dragArea list-group"
+          :list="list2"
+          :options="{ group: 'people' }"
+          @change="log"
+        >
+          <div
+            class="list-group-item"
+            v-for="(element, index) in list2"
+            :key="element.id"
+          >
+            {{ element.name }}
+          </div>
+        </draggable>
+      </div>
+
+      <rawDisplayer
+        class="col-3"
+        :value="list1"
+        title="List 1"
+      />
+
+      <rawDisplayer
+        class="col-3"
+        :value="list2"
+        title="List 2"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+import rawDisplayer from "./raw-displayer.vue";
+let idGlobal = 8;
+export default {
+  name: "clone",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  data() {
+    return {
+      list1: [
+        { name: "dog 1", id: 1 },
+        { name: "dog 2", id: 2 },
+        { name: "dog 3", id: 3 },
+        { name: "dog 4", id: 4 }
+      ],
+      list2: [
+        { name: "cat 5", id: 5 },
+        { name: "cat 6", id: 6 },
+        { name: "cat 7", id: 7 }
+      ]
+    };
+  },
+  methods: {
+    log: function(evt) {
+      window.console.log(evt);
+    },
+    cloneDog({ id }) {
+      return {
+        id: idGlobal++,
+        name: `cat ${id}`
+      };
+    }
+  }
+};
+</script>
+<style scoped></style>

example/components/two-lists.vue

@@ -2,9 +2,9 @@
   <div class=" justify-content-center jumbotron">
     <div class="row">
       <div class="col-3">
-        <h3>Draggable for list 1</h3>
+        <h3>Draggable 1</h3>
         <draggable
-          class="dragArea list-group"
+          class="list-group"
           :list="list1"
           :options="{ group: 'people' }"
           @change="log"
@@ -20,9 +20,9 @@
       </div>
 
       <div class="col-3">
-        <h3>Draggable for list 2</h3>
+        <h3>Draggable 2</h3>
         <draggable
-          class="dragArea list-group"
+          class="list-group"
           :list="list2"
           :options="{ group: 'people' }"
           @change="log"
@@ -86,8 +86,3 @@ export default {
   }
 };
 </script>
-<style>
-.dragArea {
-  min-height: 10px;
-}
-</style>