Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

src/Grid.vue

 <template>
-  <div @dragover.prevent @drop.prevent="handleDrop" class="grid">
+  <div
+    @dragover.prevent="handleDragOver"
+    @drop.prevent="handleDrop"
+    class="grid"
+  >
     <slot name="highlight">
-      <div id="highlight"></div>
+      <div id="highlight" ref="highlight"></div>
     </slot>
     <DragContainer
       v-for="item in items"
@@ -35,7 +39,19 @@ export default {
     },
   },
   methods: {
+    handleDragOver(event) {
+      let data = event.dataTransfer.getData("vueDrag/gridItem");
+      let element = JSON.parse(data);
+      let coords = this.getCoords(event.layerX, event.layerY);
+
+      this.$refs.highlight.style.display = "block";
+      this.$refs.highlight.style.gridColumnStart = coords.x + "";
+      this.$refs.highlight.style.gridRowStart = coords.y + "";
+      this.$refs.highlight.style.gridColumnEnd = "span " + element.w;
+      this.$refs.highlight.style.gridRowEnd = "span " + element.h;
+    },
     handleDrop(event) {
+      this.$refs.highlight.style.display = "none";
       let data = event.dataTransfer.getData("vueDrag/gridItem");
       let element = JSON.parse(data);
       console.log(element);
@@ -45,12 +61,17 @@ export default {
         }),
         1
       );
-      element.x =
-        1 + Math.trunc(event.layerX / (event.target.offsetWidth / this.cols));
-      element.y =
-        1 + Math.trunc(event.layerY / (event.target.offsetHeight / this.rows));
+      let coords = this.getCoords(event.layerX, event.layerY);
+      element.x = coords.x;
+      element.y = coords.y;
       this.items.push(element);
     },
+    getCoords(x, y) {
+      return {
+        x: Math.ceil(x / (this.$el.offsetWidth / this.cols)),
+        y: Math.ceil(y / (this.$el.offsetHeight / this.rows)),
+      };
+    },
   },
   data() {
     return {
@@ -68,6 +89,11 @@ export default {
 #highlight {
   background: darkgrey;
   border: grey dashed 2px;
+  display: none;
+  transition: all 2s ease-in-out;
+  z-index: -1;
+  pointer-events: none;
+  user-select: none;
 }
 
 .grid {