Resolve "Implement basic functionality"

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

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: {