Create Grid And Container components

docs/.vuepress/config.js

@@ -7,7 +7,7 @@ module.exports = {
                 title: 'Components',
                 collapsable: false,
                 children: [
-                    '/components/component.md',
+                    '/components/grid.md',
                 ]
             }
         ]

src/Component.vue

-<template>
-  <div/>
-</template>
-<script>
-export default {
-  name: 'Component'
-}
-</script>
\ No newline at end of file

src/DragContainer.vue

+<template>
+  <div @dragstart="handleDragStart">
+    <slot>
+      <div id="container"></div>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DragContainer",
+  methods: {
+    handleDragStart(event) {
+      event.dataTransfer.setData("text", event.target.id);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/Grid.vue

+<template>
+  <div @dragover.prevent @drop.prevent="">
+    <slot name="highlight">
+      <div id="highlight"></div>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Grid',
+  props: {
+    rows: {
+      type: Number,
+      required: true
+    },
+    cols: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    handleDrop(event) {
+      let data = event.dataTransfer.getData("text");
+      event.target.appendChild(document.getElementById(data));
+    }
+  }
+}
+</script>
+
+<style scoped>
+#highlight {
+  background: darkgrey;
+  border: grey dashed 2px;
+}
+</style>
\ No newline at end of file

src/components.js

-import Component from "./Component.vue";
+import DragContainer from "./DragContainer.vue";
+import Grid from "./Grid.vue";
 
-export default {Component};
+export default {DragContainer, Grid};