Clone example

Author: David-Desmaisons

example/App.vue

@@ -32,6 +32,17 @@
           >Two Lists</a>
         </li>
 
+          <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#clone"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+          >Clone</a>
+        </li>
+
       </ul>
       <div
         class="tab-content"
@@ -58,6 +69,16 @@
 
         </div>
 
+        <div
+          class="tab-pane show"
+          id="clone"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <clone />
+
+        </div>
+
 
       </div>
     </div>
@@ -67,12 +88,14 @@
 <script>
 import simple from "./components/simple";
 import twoLists from "./components/two-lists";
+import clone from "./components/clone";
 
 export default {
   name: "app",
   components: {
     simple,
-    twoLists
+    twoLists,
+    clone
   }
 };
 </script>

example/components/clone.vue

@@ -0,0 +1,93 @@
+<template>
+
+  <div class=" justify-content-center jumbotron">
+
+    <div class="row">
+      <div class="col-3">
+        <h3>Draggable for list 1</h3>
+        <draggable
+          class="dragArea list-group"
+          :list="list1"
+          :options="{group:{name:'people', pull:'clone', put:false }}"
+          @change="log"
+        >
+          <div
+            class="list-group-item"
+            v-for="(element, index) in list1"
+            :key="element.name"
+          >
+            {{element.name}} {{index}}
+          </div>
+        </draggable>
+      </div>
+
+      <div class="col-3">
+        <h3>Draggable for list 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.name"
+          >
+            {{element.name}} {{index}}
+          </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 "@/components/Vuedraggable";
+import rawDisplayer from "./raw-displayer.vue";
+let id = 1;
+export default {
+  name: "clone",
+  components: {
+    draggable,
+    rawDisplayer
+  },
+  data() {
+    return {
+      list1: [
+        { name: "John", id: 1 },
+        { name: "Joao", id: 2 },
+        { name: "Jean", id: 3 },
+        { name: "Gerard", id: 4 }
+      ],
+      list2: [
+        { name: "Juan", id: 5 },
+        { name: "Edgard", id: 6 },
+        { name: "Johnson", id: 7 }
+      ]
+    };
+  },
+  methods: {
+    log: function(evt) {
+      console.log(evt);
+    }
+  }
+};
+</script>
+<style scoped>
+</style>
+

example/components/raw-displayer.vue

@@ -6,6 +6,7 @@
 </template>
 <script>
 const props = {
+  name: "raw-displayer",
   title: {
     required: true,
     type: String

example/components/simple.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="row justify-content-center jumbotron">
+  <div class="justify-content-center jumbotron">
+    <div class="row">
 
       <div class="col-2">
         <div
@@ -71,9 +71,6 @@ export default {
   computed: {
     draggingInfo() {
       return this.dragging ? "under drag" : "";
-    },
-    listString() {
-      return JSON.stringify(this.list, null, 2);
     }
   },
   methods: {

example/components/two-lists.vue

@@ -60,6 +60,7 @@ import draggable from "@/components/Vuedraggable";
 import rawDisplayer from "./raw-displayer.vue";
 
 export default {
+  name: "two-lists",
   components: {
     draggable,
     rawDisplayer