Skip to content
Snippets Groups Projects
Commit dcf0047b authored by Jonathan Weth's avatar Jonathan Weth :keyboard:
Browse files

Merge branch 'disabled-fields-on-drag' into 'main' 

Pass dragging information to slot for disabled fields

See merge request !12
parents d69d26ef 277c2ec9
No related branches found
No related tags found
1 merge request!12Pass dragging information to slot for disabled fields
Pipeline #142940 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
docs/guide/index.md
+ 4
− 0
View file @ dcf0047b
......@@ -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`.
......
example/index.html
+ 1
− 1
View file @ dcf0047b
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
......
example/src/Example5Colors.vue
+ 3
− 3
View file @ dcf0047b
......@@ -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;
......
example/src/Example7DisabledItems.vue
+ 25
− 16
View file @ dcf0047b
......@@ -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,
};
},
};
......
src/DragGrid.vue
+ 20
− 8
View file @ dcf0047b
......@@ -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.",
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment