Merge pull request SortableJS#643 from waynevanson/master

Nested example with v-model and vuex

Author: David-Desmaisons

dist/vuedraggable.common.js

@@ -0,0 +1,32 @@
+<template>
+  <div class="justify-content-between row">
+    <nested-test class="col-8" v-model="elements" />
+    <raw-displayer class="col-4" :title="'Vuex Store'" :value="elements" />
+  </div>
+</template>
+
+<script>
+import NestedTest from "./nested/nested-test.vue";
+import rawDisplayer from "./infra/raw-displayer.vue";
+
+export default {
+  name: "nested-with-vmodel",
+  display: "Nested (v-model & vuex)",
+  order: 16,
+  components: {
+    NestedTest,
+    rawDisplayer
+  },
+  computed: {
+    elements: {
+      get() {
+        return this.$store.state.nested.elements;
+      },
+      set(value) {
+        this.$store.dispatch("nested/updateElements", value);
+      }
+    }
+  },
+  methods: {}
+};
+</script>

dist/vuedraggable.common.js.map

@@ -0,0 +1,48 @@
+import Vuex from "vuex";
+import Vue from "vue";
+
+Vue.use(Vuex);
+
+export const nested = {
+  namespaced: true,
+  state: {
+    elements: [
+      {
+        id: 1,
+        name: "Shrek",
+        elements: []
+      },
+      {
+        id: 2,
+        name: "Fiona",
+        elements: [
+          {
+            id: 4,
+            name: "Lord Farquad",
+            elements: []
+          },
+          {
+            id: 5,
+            name: "Prince Charming",
+            elements: []
+          }
+        ]
+      },
+      {
+        id: 3,
+        name: "Donkey",
+        elements: []
+      }
+    ]
+  },
+  mutations: {
+    updateElements: (state, payload) => {
+      state.elements = payload;
+    }
+  },
+  actions: {
+    updateElements: ({ commit }, payload) => {
+      commit("updateElements", payload);
+    }
+  }
+};

dist/vuedraggable.umd.js

@@ -0,0 +1,73 @@
+<style scoped>
+.item-container {
+  max-width: 20rem;
+  margin: 0;
+}
+
+.item {
+  padding: 1rem;
+  border: solid black 1px;
+  background-color: #fefefe;
+}
+.item-sub {
+  margin: 0 0 0 1rem;
+}
+</style>
+
+<template>
+  <draggable
+    v-bind="dragOptions"
+    tag="div"
+    class="item-container"
+    :list="list"
+    :value="value"
+    @input="emitter"
+  >
+    <div class="item-group" :key="el.id" v-for="el in realValue">
+      <div class="item">{{ el.name }}</div>
+      <nested-test class="item-sub" :list="el.elements" />
+    </div>
+  </draggable>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+export default {
+  name: "nested-test",
+  methods: {
+    emitter(value) {
+      this.$emit("input", value);
+    }
+  },
+  components: {
+    draggable
+  },
+  computed: {
+    dragOptions() {
+      return {
+        animation: 0,
+        group: "description",
+        disabled: false,
+        ghostClass: "ghost"
+      };
+    },
+    // this.value when input = v-model
+    // this.list  when input != v-model
+    realValue() {
+      return this.value ? this.value : this.list;
+    }
+  },
+  props: {
+    value: {
+      required: false,
+      type: Array,
+      default: null
+    },
+    list: {
+      required: false,
+      type: Array,
+      default: null
+    }
+  }
+};
+</script>

dist/vuedraggable.umd.js.map

@@ -4,7 +4,7 @@ import VueRouter from "vue-router";
 import routes from "./route";
 import rawDisplayer from "./components/infra/raw-displayer.vue";
 import ElementUI from "element-ui";
-
+import store from "./store";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "font-awesome/css/font-awesome.css";
 
@@ -20,6 +20,7 @@ Vue.component("rawDisplayer", rawDisplayer);
 Vue.use(ElementUI);
 
 new Vue({
+  store,
   router,
   render: h => h(App)
 }).$mount("#app");

dist/vuedraggable.umd.min.js.map

@@ -0,0 +1,12 @@
+import { nested } from "./components/nested/nested-store";
+import Vuex from "vuex";
+import Vue from "vue";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  namespaced: true,
+  modules: {
+    nested
+  }
+});