Pass dragging information to slot for disabled fields

example/src/Example7DisabledItems.vue

@@ -3,23 +3,31 @@ import DragGrid from "../../src/DragGrid.vue";
 </script>
 
 <template>
-  <drag-grid
-    v-model="someDisabledItems"
-    :cols="4"
-    :rows="4"
-    class="size"
-    :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
+  <div>
+    <label>
+      <input type="checkbox" v-model="showDisabled" />
+      Show disabled fields even when not dragged over?
+    </label>
+    <drag-grid
+      v-model="someDisabledItems"
+      :cols="4"
+      :rows="4"
+      class="size"
+      :disabled-fields="disabledFields"
     >
-  </drag-grid>
+      <template #item="{ rawItem }">
+        <div
+          class="container"
+          :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+        ></div>
+      </template>
+      <template #disabledField="{ isDraggedOver }">
+        <div class="container" v-show="showDisabled || isDraggedOver">
+          This field is disabled!
+        </div>
+      </template>
+    </drag-grid>
+  </div>
 </template>
 
 <script>
@@ -40,6 +48,7 @@ export default {
         { x: 2, y: 3 },
         { x: 4, y: 2 },
       ],
+      showDisabled: false,
     };
   },
 };