Add clone on control example

Author: David-Desmaisons

example/components/clone-on-control.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col">
+        <h3>Press Ctrl to clone element from list 1</h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-3">
+        <h3>Draggable 1</h3>
+        <draggable
+          class="dragArea list-group"
+          :list="list1"
+          :clone="clone"
+          :group="{ name: 'people', pull: pullFunction}"
+          @start="start"
+        >
+          <div
+            class="list-group-item"
+            v-for="element 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"
+          group="people"
+        >
+          <div
+            class="list-group-item"
+            v-for="element 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";
+let idGlobal = 8;
+export default {
+  name: "clone-on-control",
+  display: "Clone on Control",
+  order: 4,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      list1: [
+        { name: "Jesus", id: 1 },
+        { name: "Paul", id: 2 },
+        { name: "Peter", id: 3 }
+      ],
+      list2: [
+        { name: "Luc", id: 5 },
+        { name: "Thomas", id: 6 },
+        { name: "John", id: 7 }
+      ],
+      controlOnStart: true
+    };
+  },
+  methods: {
+    clone({ name }) {
+      return { name, id: idGlobal++ };
+    },
+    pullFunction() {
+      return this.controlOnStart ? "clone" : true;
+    },
+    start({ originalEvent }) {
+      this.controlOnStart = originalEvent.ctrlKey;
+    }
+  }
+};
+</script>
+<style scoped></style>

example/components/footerslot.vue

@@ -44,7 +44,7 @@ let id = 1;
 export default {
   name: "footerslot",
   display: "Footer slot",
-  order: 11,
+  order: 12,
   components: {
     draggable
   },

example/components/handle.vue

@@ -34,7 +34,7 @@ import draggable from "@/vuedraggable";
 export default {
   name: "handle",
   display: "Handle",
-  order: 4,
+  order: 5,
   components: {
     draggable
   },

example/components/headerslot.vue

@@ -40,7 +40,7 @@ let id = 1;
 export default {
   name: "headerslot",
   display: "Header slot",
-  order: 12,
+  order: 13,
   components: {
     draggable
   },

example/components/nested-example.vue

@@ -14,7 +14,7 @@ import nestedDraggable from "./infra/nested";
 export default {
   name: "nested-example",
   display: "Nested",
-  order: 14,
+  order: 15,
   components: {
     nestedDraggable
   },

example/components/table-column-example..vue

@@ -30,7 +30,7 @@ import draggable from "@/vuedraggable";
 export default {
   name: "table-column-example",
   display: "Table Column",
-  order: 8,
+  order: 9,
   components: {
     draggable
   },

example/components/table-example.vue

@@ -30,7 +30,7 @@ import draggable from "@/vuedraggable";
 export default {
   name: "table-example",
   display: "Table",
-  order: 7,
+  order: 8,
   components: {
     draggable
   },

example/components/third-party.vue

@@ -37,7 +37,7 @@ import draggable from "@/vuedraggable";
 export default {
   name: "third-party",
   display: "Third party",
-  order: 9,
+  order: 10,
   components: {
     draggable
   },

example/components/transition-example-2.vue

@@ -56,7 +56,7 @@ const message = [
 export default {
   name: "transition-example-2",
   display: "Transitions",
-  order: 6,
+  order: 7,
   components: {
     draggable
   },

example/components/transition-example.vue

@@ -55,7 +55,7 @@ const message = [
 export default {
   name: "transition-example",
   display: "Transition",
-  order: 5,
+  order: 6,
   components: {
     draggable
   },