<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
+ <VSelector @select="addItem" />
+ <div>
+ <VDraggable v-for="(item, index) in items" :key="index">
+ <component :is="item.tag"></component>
+ </VDraggable>
+ </div>
+ <div
+ class="drop-zone"
+ @drop="onDrop($event, 1)"
+ @dragover.prevent
+ @dragenter.prevent
+ >
+ <div
+ v-for="item in listOne"
+ :key="item.title"
+ class="drag-el"
+ draggable
+ @dragstart="startDrag($event, item)"
+ >
+ {{ item.title }}
+ </div>
+ </div>
+ <div
+ class="drop-zone"
+ @drop="onDrop($event, 2)"
+ @dragover.prevent
+ @dragenter.prevent
+ >
+ <div
+ v-for="item in listTwo"
+ :key="item.title"
+ class="drag-el"
+ draggable
+ @dragstart="startDrag($event, item)"
+ >
+ {{ item.title }}
+ </div>
+ </div>
<router-view />
</div>
</template>
+<script>
+import VDraggable from "@/components/VDraggable";
+import VSelector from "@/components/VSelector";
+
+export default {
+ components: {
+ VDraggable,
+ VSelector,
+ },
+ data() {
+ return {
+ items: [],
+ items2: [
+ {
+ id: 0,
+ title: "Item A",
+ list: 1,
+ },
+ {
+ id: 1,
+ title: "Item B",
+ list: 1,
+ },
+ {
+ id: 2,
+ title: "Item C",
+ list: 2,
+ },
+ ],
+ };
+ },
+ computed: {
+ listOne() {
+ return this.items2.filter((item) => item.list == 1);
+ },
+ listTwo() {
+ return this.items2.filter((item) => item.list == 2);
+ },
+ },
+ methods: {
+ startDrag(evt, item) {
+ evt.dataTransfer.dropEffect = "move";
+ evt.dataTransfer.effectAllowed = "move";
+ evt.dataTransfer.setData("itemID", item.id);
+ },
+ onDrop(evt, list) {
+ const itemID = evt.dataTransfer.getData("itemID");
+ const item = this.items2.find((item) => item.id == itemID);
+ item.list = list;
+ },
+ addItem(tag) {
+ this.items.push({ tag: tag });
+ },
+ },
+};
+</script>
+
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
}
}
}
+
+.drop-zone {
+ background-color: #eee;
+ margin-bottom: 10px;
+ padding: 10px;
+}
+
+.drag-el {
+ background-color: #fff;
+ margin-bottom: 10px;
+ padding: 5px;
+}
</style>
--- /dev/null
+<template>
+ <b-button-group>
+ <b-button
+ v-for="(item, index) in items"
+ :key="index"
+ @click="selectItem(item.tag)"
+ >
+ {{ item.caption }}
+ </b-button>
+ </b-button-group>
+</template>
+
+<script>
+export default {
+ name: "VSelector",
+ data() {
+ return {
+ items: [
+ {
+ tag: "b-form-input",
+ caption: "Form Input",
+ },
+ {
+ tag: "b-form-radio",
+ caption: "Form Radio",
+ },
+ {
+ tag: "b-form-select",
+ caption: "Form Select",
+ },
+ ],
+ };
+ },
+ methods: {
+ selectItem(tag) {
+ this.$emit("select", tag);
+ },
+ },
+};
+</script>