two list example

Author: David-Desmaisons

example/App.vue

@@ -20,6 +20,18 @@
             aria-selected="true"
           >Simple</a>
         </li>
+
+         <li class="nav-item">
+          <a
+            class="nav-link"
+            data-toggle="tab"
+            href="#twoLists"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+          >Two Lists</a>
+        </li>
+
       </ul>
       <div
         class="tab-content"
@@ -32,22 +44,35 @@
           role="tabpanel"
           aria-labelledby="profile-tab"
         >
-
           <simple />
 
         </div>
 
+         <div
+          class="tab-pane show"
+          id="twoLists"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <twoLists />
+
+        </div>
+
+
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import simple from "./components/simple";
+import twoLists from "./components/two-lists";
+
 export default {
   name: "app",
   components: {
-    simple
+    simple,
+    twoLists
   }
 };
 </script>

example/components/simple.vue

@@ -20,11 +20,12 @@
         </div>
       </div>
 
-      <div class="list-group col-6">
+      <div class="col-6">
         <h2>Draggable {{draggingInfo}}</h2>
 
         <draggable
           :list="list"
+          class="list-group"
           @start="dragging=true"
           @end="dragging=false"
         >

example/components/two-lists.vue

@@ -0,0 +1,105 @@
+<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:'people'}"
+          @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";
+
+export default {
+  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: {
+    add: function() {
+      this.list.push({ name: "Juan" });
+    },
+    replace: function() {
+      this.list = [{ name: "Edgard" }];
+    },
+    clone: function(el) {
+      return {
+        name: el.name + " cloned"
+      };
+    },
+    log: function(evt) {
+      console.log(evt);
+    }
+  }
+};
+</script>
+<style>
+.dragArea {
+  min-height: 10px;
+}
+</style>
+

example/main.js

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

package-lock.json

@@ -12,7 +12,6 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "bootstrap": "^4.3.1",
     "sortablejs": "^1.8.3",
     "vue": "^2.5.22"
   },
@@ -26,9 +25,11 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
+    "bootstrap": "^4.3.1",
     "component-fixture": "^0.4.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "jquery": "^3.3.1",
     "vue-cli-plugin-component": "^1.10.5",
     "vue-template-compiler": "^2.5.21"
   },