Start developing functionality

src/DragContainer.vue

 <template>
-  <div @dragstart="handleDragStart">
+  <div @dragstart="handleDragStart" draggable="true" id="wrapper">
     <slot>
-      <div id="container"></div>
+      <div id="container">
+        <dl>
+          <dt>Position</dt>
+          <dd>{{ x }}, {{ y }}</dd>
+          <dt>Size</dt>
+          <dd>{{ w }} × {{ h }}</dd>
+        </dl>
+      </div>
     </slot>
   </div>
 </template>
@@ -12,12 +19,23 @@ export default {
   methods: {
     handleDragStart(event) {
       event.dataTransfer.setData("text", event.target.id);
-    }
-  }
-}
+    },
+  },
+  props: {
+    x: Number,
+    y: Number,
+    w: Number,
+    h: Number,
+  },
+};
 </script>
 
 <style scoped>
+#wrapper {
+  grid-column: v-bind(x) / span v-bind(w);
+  grid-row: v-bind(y) / span v-bind(h);
+}
+
 #container {
   background: lightcoral;
   width: 100%;

src/Grid.vue

 <template>
-  <div @dragover.prevent @drop.prevent="">
+  <div @dragover.prevent @drop.prevent="handleDrop" class="grid">
     <slot name="highlight">
       <div id="highlight"></div>
     </slot>
+    <DragContainer
+      v-for="item in items"
+      :key="item.key"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+    >
+    </DragContainer>
   </div>
 </template>
 
 <script>
+import DragContainer from "./DragContainer.vue";
+
 export default {
-  name: 'Grid',
+  name: "Grid",
+  components: {
+    DragContainer,
+  },
   props: {
     rows: {
       type: Number,
@@ -23,9 +37,18 @@ export default {
     handleDrop(event) {
       let data = event.dataTransfer.getData("text");
       event.target.appendChild(document.getElementById(data));
-    }
-  }
-}
+    },
+  },
+  data() {
+    return {
+      items: [
+        { x: 3, y: 3, w: 1, h: 1, key: "obj1" },
+        { x: 1, y: 1, w: 1, h: 1, key: "obj2" },
+        { x: 4, y: 3, w: 2, h: 2, key: "obj3" },
+      ],
+    };
+  },
+};
 </script>
 
 <style scoped>
@@ -33,4 +56,15 @@ export default {
   background: darkgrey;
   border: grey dashed 2px;
 }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(v-bind(cols), 1fr);
+  grid-template-rows: repeat(v-bind(rows), 1fr);
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  min-height: 100px;
+  gap: 1em;
+}
 </style>