Save ID of grid

src/DragContainer.vue

 <template>
-  <div @dragstart="handleDragStart" draggable="true" id="wrapper">
+  <div @dragstart="handleDragStart" :draggable="!isDisabled" id="wrapper">
     <slot></slot>
   </div>
 </template>
@@ -9,6 +9,7 @@ export default {
   name: "DragContainer",
   methods: {
     handleDragStart(event) {
+      if (this.isDisabled) return;
       event.dataTransfer.setData(
         "vueDrag/gridItem",
         JSON.stringify({
@@ -19,6 +20,7 @@ export default {
           h: this.h,
           data: this.data,
           context: this.context,
+          originGridId: this.gridId,
         })
       );
     },
@@ -31,13 +33,36 @@ export default {
     h: Number,
     data: Object,
     context: String,
+    gridId: String,
+    disabled: Boolean,
+  },
+  computed: {
+    isInGrid() {
+      return this.x >= 0 && this.y >= 0;
+    },
+    isNotInGrid() {
+      return this.x === -1 || this.y === -1;
+    },
+    getX() {
+      return this.x === 0 ? "auto" : this.x;
+    },
+    getY() {
+      return this.y === 0 ? "auto" : this.y;
+    },
+    getDisplay() {
+      return this.isInGrid ? "block" : "none";
+    },
+    isDisabled() {
+      return this.disabled || this.isNotInGrid;
+    },
   },
 };
 </script>
 
 <style scoped>
 #wrapper {
-  grid-column: v-bind(x) / span v-bind(w);
-  grid-row: v-bind(y) / span v-bind(h);
+  grid-column: v-bind(getX) / span v-bind(w);
+  grid-row: v-bind(getY) / span v-bind(h);
+  display: v-bind(getDisplay);
 }
 </style>

src/DragGrid.vue

@@ -17,6 +17,7 @@
       :h="get('h', item)"
       :data="item.data"
       :context="context"
+      :grid-id="gridId"
     >
       <slot v-bind="item" name="item">
         <dl>
@@ -71,6 +72,11 @@ export default {
       required: false,
       default: uuidv4,
     },
+    gridId: {
+      type: String,
+      required: false,
+      default: uuidv4,
+    },
   },
   methods: {
     positionAllowed(x, y, key) {