4 <router-link to="/">Home</router-link> |
5 <router-link to="/about">About</router-link>
7 <VSelector @select="addItem" />
9 <VDraggable v-for="(item, index) in items" :key="index">
10 <component :is="item.tag"></component>
15 @drop="onDrop($event, 1)"
20 v-for="item in listOne"
24 @dragstart="startDrag($event, item)"
31 @drop="onDrop($event, 2)"
36 v-for="item in listTwo"
40 @dragstart="startDrag($event, item)"
50 import VDraggable from "@/components/VDraggable";
51 import VSelector from "@/components/VSelector";
82 return this.items2.filter((item) => item.list == 1);
85 return this.items2.filter((item) => item.list == 2);
89 startDrag(evt, item) {
90 evt.dataTransfer.dropEffect = "move";
91 evt.dataTransfer.effectAllowed = "move";
92 evt.dataTransfer.setData("itemID", item.id);
95 const itemID = evt.dataTransfer.getData("itemID");
96 const item = this.items2.find((item) => item.id == itemID);
100 this.items.push({ tag: tag });
108 font-family: Avenir, Helvetica, Arial, sans-serif;
109 -webkit-font-smoothing: antialiased;
110 -moz-osx-font-smoothing: grayscale;
122 &.router-link-exact-active {
129 background-color: #eee;
135 background-color: #fff;