Add example for disabled fields

example/src/App.vue

@@ -281,6 +281,27 @@ import NumberCounter from "./components/NumberCounter.vue";
       </div>
       <div>
         <h2>Example 7: Disabled fields and items with props</h2>
+        <p>
+          This is a grid with disabled fields and items. Red items are disabled
+          and cannot be moved.
+        </p>
+        <drag-grid
+          v-model="someDisabledItems"
+          :cols="4"
+          :rows="4"
+          class="tic-tac-toe"
+          :disabled-fields="disabledFields"
+        >
+          <template #item="{ rawItem }">
+            <div
+              class="container"
+              :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+            ></div>
+          </template>
+          <template #disabledField
+            ><div class="container">This field is disabled!</div></template
+          >
+        </drag-grid>
       </div>
     </div>
   </div>
@@ -455,6 +476,16 @@ export default {
         y: 2,
       },
       gridDisabled: true,
+      someDisabledItems: [
+        { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
+        { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
+        { key: "key3", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
+        { key: "key4", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
+      ],
+      disabledFields: [
+        { x: 1, y: 1 },
+        { x: 2, y: 3 },
+      ],
     };
   },
   computed: {