src/App.vue

   1 <template>
   2   <div id="app">
   3     <div id="nav">
   4       <router-link to="/">Home</router-link> |
   5       <router-link to="/about">About</router-link>
   6     </div>
   7     <VSelector @select="addItem" />
   8     <div>
   9       <VDraggable v-for="(item, index) in items" :key="index">
  10         <component :is="item.tag"></component>
  11       </VDraggable>
  12     </div>
  13     <div
  14       class="drop-zone"
  15       @drop="onDrop($event, 1)"
  16       @dragover.prevent
  17       @dragenter.prevent
  18     >
  19       <div
  20         v-for="item in listOne"
  21         :key="item.title"
  22         class="drag-el"
  23         draggable
  24         @dragstart="startDrag($event, item)"
  25       >
  26         {{ item.title }}
  27       </div>
  28     </div>
  29     <div
  30       class="drop-zone"
  31       @drop="onDrop($event, 2)"
  32       @dragover.prevent
  33       @dragenter.prevent
  34     >
  35       <div
  36         v-for="item in listTwo"
  37         :key="item.title"
  38         class="drag-el"
  39         draggable
  40         @dragstart="startDrag($event, item)"
  41       >
  42         {{ item.title }}
  43       </div>
  44     </div>
  45     <router-view />
  46   </div>
  47 </template>
  48
  49 <script>
  50 import VDraggable from "@/components/VDraggable";
  51 import VSelector from "@/components/VSelector";
  52
  53 export default {
  54   components: {
  55     VDraggable,
  56     VSelector,
  57   },
  58   data() {
  59     return {
  60       items: [],
  61       items2: [
  62         {
  63           id: 0,
  64           title: "Item A",
  65           list: 1,
  66         },
  67         {
  68           id: 1,
  69           title: "Item B",
  70           list: 1,
  71         },
  72         {
  73           id: 2,
  74           title: "Item C",
  75           list: 2,
  76         },
  77       ],
  78     };
  79   },
  80   computed: {
  81     listOne() {
  82       return this.items2.filter((item) => item.list == 1);
  83     },
  84     listTwo() {
  85       return this.items2.filter((item) => item.list == 2);
  86     },
  87   },
  88   methods: {
  89     startDrag(evt, item) {
  90       evt.dataTransfer.dropEffect = "move";
  91       evt.dataTransfer.effectAllowed = "move";
  92       evt.dataTransfer.setData("itemID", item.id);
  93     },
  94     onDrop(evt, list) {
  95       const itemID = evt.dataTransfer.getData("itemID");
  96       const item = this.items2.find((item) => item.id == itemID);
  97       item.list = list;
  98     },
  99     addItem(tag) {
 100       this.items.push({ tag: tag });
 101     },
 102   },
 103 };
 104 </script>
 105
 106 <style lang="scss">
 107 #app {
 108   font-family: Avenir, Helvetica, Arial, sans-serif;
 109   -webkit-font-smoothing: antialiased;
 110   -moz-osx-font-smoothing: grayscale;
 111   text-align: center;
 112   color: #2c3e50;
 113 }
 114
 115 #nav {
 116   padding: 30px;
 117
 118   a {
 119     font-weight: bold;
 120     color: #2c3e50;
 121
 122     &.router-link-exact-active {
 123       color: #42b983;
 124     }
 125   }
 126 }
 127
 128 .drop-zone {
 129   background-color: #eee;
 130   margin-bottom: 10px;
 131   padding: 10px;
 132 }
 133
 134 .drag-el {
 135   background-color: #fff;
 136   margin-bottom: 10px;
 137   padding: 5px;
 138 }
 139 </style>