Change zIndex of dragged item to be the biggest

src/DragContainer.vue

@@ -31,10 +31,13 @@ export default {
         mouseX: event.clientX - rect.x - rect.width / (2 * this.w), // relative to center of the top left square
         mouseY: event.clientY - rect.y - rect.height / (2 * this.h),
       };
+      // Now the element is on top of everything else inside the grid (not on top of other grids though)
+      this.zIndex = 999999;
     },
     handleDragEnd() {
       this.offsetX = 0;
       this.offsetY = 0;
+      this.zIndex = "auto";
     },
     handleDragMove(event) {
       this.offsetX += event.dx;
@@ -108,6 +111,7 @@ export default {
       dataTransfer: {},
       offsetX: 0,
       offsetY: 0,
+      zIndex: "auto",
     };
   },
 };
@@ -123,5 +127,6 @@ export default {
     calc(1px * v-bind(offsetX)),
     calc(1px * v-bind(offsetY))
   );
+  z-index: v-bind(zIndex);
 }
 </style>