Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

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>