Make objects draggable

src/DragContainer.vue

@@ -3,6 +3,8 @@
     <slot>
       <div id="container">
         <dl>
+          <dt>Key</dt>
+          <dd>{{ dragID }}</dd>
           <dt>Position</dt>
           <dd>{{ x }}, {{ y }}</dd>
           <dt>Size</dt>
@@ -18,10 +20,22 @@ export default {
   name: "DragContainer",
   methods: {
     handleDragStart(event) {
-      event.dataTransfer.setData("text", event.target.id);
+      event.dataTransfer.setData(
+          "vueDrag/gridItem",
+          JSON.stringify(
+              {
+                key: this.dragID,
+                x: this.x,
+                y: this.y,
+                w: this.w,
+                h: this.h
+              }
+          )
+      );
     },
   },
   props: {
+    dragID: String,
     x: Number,
     y: Number,
     w: Number,

src/Grid.vue

@@ -6,6 +6,7 @@
     <DragContainer
       v-for="item in items"
       :key="item.key"
+      :drag-i-d="item.key"
       :x="item.x"
       :y="item.y"
       :w="item.w"
@@ -35,8 +36,13 @@ export default {
   },
   methods: {
     handleDrop(event) {
-      let data = event.dataTransfer.getData("text");
-      event.target.appendChild(document.getElementById(data));
+      let data = event.dataTransfer.getData("vueDrag/gridItem");
+      let element = JSON.parse(data);
+      console.log(element);
+      this.items.splice(this.items.findIndex((i) => {return i.key === element.key}), 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));
+      this.items.push(element);
     },
   },
   data() {