diff --git a/docs/guide/index.md b/docs/guide/index.md
index 9b6d2f8c8630a57e5970d2ba3ca7daeddea3ce7f..115775542cf3d495a3cd1244ca9fb53699c81bf6 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -77,6 +77,10 @@ disabledFields: [
];
```
+To highlight, which fields are disabled, the `disabledField` slot can be used. It receives the slot prop `isDraggedOver`,
+which is a boolean indicating whether something is currently dragged over the grid. This can be used to only show the
+disabled fields when something is dragging. An example for this can be found in Example number 7.
+
## Prevent items from being dragged
To disable dragging of a specific item, simply set the attribute `disabled` of the item to `true`.
diff --git a/example/index.html b/example/index.html
index 049aebe05d829113e7de6e200e93c62954d817f4..53db67a8ed1d6f2b1db997237c4725a3af3cbc3c 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
diff --git a/example/src/Example5Colors.vue b/example/src/Example5Colors.vue
index 47c2d4ec9345724a0c0a4e2778cf4dbd66a6d551..f3224df18eb07927c6bf429cdfb4ec1f7676ec7d 100644
--- a/example/src/Example5Colors.vue
+++ b/example/src/Example5Colors.vue
@@ -91,7 +91,7 @@ export default {
// Moved to gridA
this.findAndRemove(
item.originGridId === "gridB" ? this.placedB : this.placedC,
- item.key
+ item.key,
);
this.placedA.push(item.key);
break;
@@ -99,7 +99,7 @@ export default {
// Moved to gridB
this.findAndRemove(
item.originGridId === "gridA" ? this.placedA : this.placedC,
- item.key
+ item.key,
);
this.placedB.push(item.key);
break;
@@ -107,7 +107,7 @@ export default {
// Moved to gridC
this.findAndRemove(
item.originGridId === "gridB" ? this.placedB : this.placedA,
- item.key
+ item.key,
);
this.placedC.push(item.key);
break;
diff --git a/example/src/Example7DisabledItems.vue b/example/src/Example7DisabledItems.vue
index dff2a1d248466e8e5bc1f1628b483abd0dd58c8d..09d2858057c055bbfc4b2acb2638a4da18d299e3 100644
--- a/example/src/Example7DisabledItems.vue
+++ b/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,
};
},
};
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 49bba443ca14a52e17969e06ffe7792a7d37c47e..1572374d6b64265cfe91c8ef0b489833d905ce61 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -3,7 +3,7 @@
droppable
@dropmove="disabled || loading ? undefined : handleDragOver($event)"
@drop.prevent="disabled || loading ? undefined : handleDrop($event)"
- @dragleave="$refs.highlightContainer.style.display = 'none'"
+ @dragleave="handleDragLeave"
class="grid"
>
<template v-if="loading">
@@ -56,7 +56,7 @@
:y="disabledField.y"
:key="disabledField.x + '|' + disabledField.y"
>
- <slot name="disabledField"></slot>
+ <slot name="disabledField" :is-dragged-over="isDraggedOver"></slot>
</GridItem>
</template>
<slot></slot>
@@ -76,6 +76,11 @@ export default {
DragContainer,
},
emits: ["input", "itemChanged"],
+ data() {
+ return {
+ isDraggedOver: false,
+ };
+ },
props: {
rows: {
type: Number,
@@ -174,7 +179,7 @@ export default {
let element = JSON.parse(data);
let coords = this.getCoords(
event.dragEvent.client.x - element.mouseX,
- event.dragEvent.client.y - element.mouseY
+ event.dragEvent.client.y - element.mouseY,
);
if (element.context !== this.context || this.noHighlight) {
@@ -182,6 +187,8 @@ export default {
return;
}
+ this.isDraggedOver = true;
+
let newPositionValid = true;
for (let x = coords.x; x < coords.x + element.w; x++) {
@@ -204,6 +211,7 @@ export default {
this.$refs.highlightContainer.style.gridRowEnd = "span " + element.h;
},
handleDrop(event) {
+ this.isDraggedOver = false;
this.$refs.highlightContainer.style.display = "none";
let data = event.relatedTarget.dataset.transfer;
if (!data) return;
@@ -217,7 +225,7 @@ export default {
let coords = this.getCoords(
event.dragEvent.client.x - element.mouseX,
- event.dragEvent.client.y - element.mouseY
+ event.dragEvent.client.y - element.mouseY,
);
let newPositionValid = true;
@@ -256,7 +264,7 @@ export default {
if (e.code === DOMException.DATA_CLONE_ERR) {
// We use functions for properties → we can't clone; only emit `item-changed` event
console.debug(
- "Grid couldn't be cloned, please listen to the `item-changed` event and handle changes yourself."
+ "Grid couldn't be cloned, please listen to the `item-changed` event and handle changes yourself.",
);
} else {
throw e;
@@ -267,6 +275,10 @@ export default {
this.$emit("itemChanged", element);
},
+ handleDragLeave() {
+ this.isDraggedOver = false;
+ this.$refs.highlightContainer.style.display = "none";
+ },
clamp: (min, num, max) => Math.min(Math.max(num, min), max),
getCoords(x, y) {
let rect = this.$el.getBoundingClientRect();
@@ -274,12 +286,12 @@ export default {
x: this.clamp(
1,
Math.ceil((x - rect.x) / (rect.width / this.cols)),
- this.cols
+ this.cols,
),
y: this.clamp(
1,
Math.ceil((y - rect.y) / (rect.height / this.rows)),
- this.rows
+ this.rows,
),
};
},
@@ -314,7 +326,7 @@ export default {
if (this.value.some((item) => item.w > 1)) {
console.warn(
"You are using multipleItemsY but some items have a width greater than 1.",
- "This is not supported and will lead to unexpected behaviour."
+ "This is not supported and will lead to unexpected behaviour.",
);
}