Enable grid disablement

example/src/App.vue

@@ -248,6 +248,41 @@ import NumberCounter from "./components/NumberCounter.vue";
         </template>
       </drag-grid>
     </div>
+
+    <div class="ttt-container">
+      <div>
+        <h2>Example 6: Disabled grid</h2>
+        <p>
+          This uses the same data as the tic tac toe but is completely disabled.
+          Notice how the items still move if the tic tac toe grid above is
+          changed. Uncheck the checkbox to enable:
+        </p>
+
+        <label>
+          <input type="checkbox" v-model="gridDisabled" />
+          Grid disabled?
+        </label>
+
+        <drag-grid
+          v-model="ticTacToe1"
+          :cols="3"
+          :rows="3"
+          :disabled="gridDisabled"
+          class="tic-tac-toe"
+          context="ticTacToe"
+          :validate-element="randomKey"
+        >
+          <template #item="item">
+            <CircularCard>
+              {{ item.key.startsWith("a") ? "X" : "O" }}
+            </CircularCard>
+          </template>
+        </drag-grid>
+      </div>
+      <div>
+        <h2>Example 7: Disabled fields and items with props</h2>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -419,6 +454,7 @@ export default {
         x: 4,
         y: 2,
       },
+      gridDisabled: true,
     };
   },
   computed: {

src/DragGrid.vue

 <template>
   <div
-    @dragover.prevent="handleDragOver"
-    @drop.prevent="handleDrop"
+    @dragover.prevent="disabled ? undefined : handleDragOver($event)"
+    @drop.prevent="disabled ? undefined : handleDrop($event)"
     class="grid"
   >
     <div class="highlight-container" ref="highlightContainer">
@@ -20,6 +20,7 @@
       :data="getObject('data', item)"
       :context="context"
       :grid-id="gridId"
+      :disabled="disabled"
     >
       <slot v-bind="transformItem(item)" :raw-item="item" name="item">
         <dl>
@@ -86,6 +87,11 @@ export default {
       required: false,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   methods: {
     positionAllowed(x, y, key) {