Fix custom highlight element

example/src/App.vue

@@ -62,6 +62,9 @@ import NumberCounter from "./components/NumberCounter.vue";
         <template #item="item">
           <number-counter v-model="item.data.num"></number-counter>
         </template>
+        <template #highlight>
+          <div ref="highlight" class="custom-highlight">Das hier ist das Highlight</div>
+        </template>
       </drag-grid>
       <span>← Drag here please →</span>
       <drag-grid v-model="counters2" :cols="3" :rows="2" context="counter">
@@ -293,6 +296,15 @@ export default {
   justify-content: space-between;
 }
 
+.custom-highlight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: aquamarine;
+  width: 100%;
+  height: 100%;
+}
+
 .bordered {
   border: 2px solid grey;
 }

src/DragGrid.vue

@@ -4,9 +4,11 @@
     @drop.prevent="handleDrop"
     class="grid"
   >
-    <slot name="highlight">
-      <div class="highlight" ref="highlight"></div>
-    </slot>
+    <div class="highlight-container" ref="highlightContainer">
+      <slot name="highlight">
+        <div class="highlight"></div>
+      </slot>
+    </div>
     <DragContainer
       v-for="item in value"
       :key="item.key"
@@ -101,7 +103,7 @@ export default {
       let coords = this.getCoords(event.layerX, event.layerY);
 
       if (element.context !== this.context) {
-        this.$refs.highlight.style.display = "none";
+        this.$refs.highlightContainer.style.display = "none";
         return;
       }
 
@@ -116,18 +118,18 @@ export default {
       }
 
       if (!newPositionValid) {
-        this.$refs.highlight.style.display = "none";
+        this.$refs.highlightContainer.style.display = "none";
         return;
       }
 
-      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;
+      this.$refs.highlightContainer.style.display = "block";
+      this.$refs.highlightContainer.style.gridColumnStart = coords.x + "";
+      this.$refs.highlightContainer.style.gridRowStart = coords.y + "";
+      this.$refs.highlightContainer.style.gridColumnEnd = "span " + element.w;
+      this.$refs.highlightContainer.style.gridRowEnd = "span " + element.h;
     },
     handleDrop(event) {
-      this.$refs.highlight.style.display = "none";
+      this.$refs.highlightContainer.style.display = "none";
       let data = event.dataTransfer.getData("vueDrag/gridItem");
       let element = JSON.parse(data);
 
@@ -194,11 +196,18 @@ export default {
 .highlight {
   background: darkgrey;
   border: grey dashed 2px;
+  width: 100%;
+  height: 100%
+}
+
+.highlight-container {
   display: none;
   transition: all 2s ease-in-out;
   z-index: -1;
   pointer-events: none;
   user-select: none;
+  width: 100%;
+  height: 100%;
 }
 
 .grid {