Skip to content
Snippets Groups Projects
Verified Commit 93265cb3 authored by Julian's avatar Julian Committed by Jonathan Weth
Browse files

Create Example for isDraggedOver and containerDrag events

parent 6a4329ae
No related branches found
No related tags found
1 merge request!15Resolve "Overview over dragged elements"
......@@ -8,6 +8,7 @@ import Example6Disabled from "./Example6Disabled.vue";
import Example7DisabledItems from "./Example7DisabledItems.vue";
import Example8Responsive from "./Example8Responsive.vue";
import Example9MultipleItemsY from "./Example9MultipleItemsY.vue";
import ExampleAOverlay from "./ExampleAOverlay.vue";
</script>
<template>
......@@ -96,6 +97,15 @@ import Example9MultipleItemsY from "./Example9MultipleItemsY.vue";
width of every item has to be <kbd>1</kbd>)
</p>
<example9-multiple-items-y />
<h2>Example 10:</h2>
<p>
This example shows, how one can find out, if the user is dragging an item,
which item is being dragged and which grid is being dragged over. This is
an example for the proper <kbd>isDraggedOver</kbd> and the
<kbd>containerDragStart</kbd> and <kbd>containerDragEnd</kbd> events.
</p>
<example-a-overlay />
</div>
</template>
......
<script>
function initialState() {
return {
items: [
{
key: "key1",
x: 1,
y: 5,
w: 1,
h: 1,
data: { name: "Cat", grid: false },
},
{
key: "key2",
x: 4,
y: 3,
w: 1,
h: 1,
data: { name: "Penguin", grid: false },
},
{
key: "key3",
x: 2,
y: 3,
w: 1,
h: 1,
data: { name: "Dog", grid: false },
},
{
key: "key4",
x: 5,
y: 4,
w: 1,
h: 1,
data: { name: "Chinchilla", grid: false },
},
{
key: "key5",
x: 5,
y: 1,
w: 1,
h: 1,
data: { name: "Iguana", grid: false },
},
{
key: "key6",
x: 3,
y: 4,
w: 1,
h: 1,
data: { name: "Axolotl", grid: true },
disabled: true,
},
],
overlays: [
{ key: "overlay1", x: 2, y: 2, animal: "Dog" },
{ key: "overlay2", x: 3, y: 5, animal: "Iguana" },
{ key: "overlay3", x: 4, y: 2, animal: "Chinchilla" },
{ key: "overlay4", x: 2, y: 4, animal: "Penguin" },
{ key: "overlay5", x: 4, y: 4, animal: "Cat" },
],
dragged: {
key1: false,
key2: false,
key3: false,
key4: false,
key5: false,
key6: false,
},
showOverlayOnlyOnDragover: false,
showAllHighlights: false,
};
}
export default {
name: "ExampleAOverlay",
data() {
return initialState();
},
methods: {
handleItemChanged(element, gridId) {
if (gridId === "second-grid" && element.originGridId === "second-grid") {
// Disable movement inside the second grid
return;
}
let overlay = this.overlays.find((o) => o.animal === element.data.name);
this.items.map((item) => {
if (item.key === element.key) {
item.data.grid = gridId === "ov-grid";
item.x = element.x;
item.y = element.y;
item.disabled =
overlay && overlay.x === element.x && overlay.y === element.y;
}
return item;
});
if (overlay && overlay.x === element.x && overlay.y === element.y) {
this.overlays = this.overlays.filter((o) => o.key !== overlay.key);
}
},
reset() {
Object.assign(this.$data, initialState());
},
handleContainerDrag(element, type) {
this.dragged[element.key] = type === "start";
},
},
computed: {
gridOneItems() {
return this.items.filter((item) => item.data.grid);
},
gridTwoItems() {
return this.items
.filter((item) => !item.data.grid)
.map((item) => ({
...item,
x: () => 0,
y: () => 0,
disabled: false,
}));
},
computedOverlays() {
if (this.showAllHighlights) {
return Object.values(this.dragged).some((obj) => !!obj)
? this.overlays
: [];
}
return this.overlays.filter(
(o) =>
this.dragged[
((a) => (a ? a.key : a))(
// Get the key of the dragged item or null
this.items.find((item) => item.data.name === o.animal),
)
],
);
},
},
};
</script>
<template>
<div>
<drag-grid
:value="gridOneItems"
:cols="5"
:rows="5"
id="ov-grid"
context="animals"
grid-id="ov-grid"
@itemChanged="handleItemChanged($event, 'ov-grid')"
@containerDragStart="handleContainerDrag($event, 'start')"
@containerDragEnd="handleContainerDrag($event, 'end')"
>
<template #item="{ rawItem }">
<div :class="{ container: true, disabled: rawItem.disabled }">
<span>{{ rawItem.data.name }}</span>
</div>
</template>
<template #default="{ isDraggedOver }">
<div
class="container goal"
v-for="goal in computedOverlays"
v-show="isDraggedOver || !showOverlayOnlyOnDragover"
:key="goal.key"
:style="{
gridColumn: goal.x + ' / span 1',
gridRow: goal.y + ' / span 1',
}"
>
{{ goal.animal }} here!
</div>
</template>
</drag-grid>
<drag-grid
:value="gridTwoItems"
:cols="1"
:rows="5"
id="second-grid"
context="animals"
grid-id="second-grid"
no-highlight
@itemChanged="handleItemChanged($event, 'second-grid')"
@containerDragStart="handleContainerDrag($event, 'start')"
@containerDragEnd="handleContainerDrag($event, 'end')"
>
<template #item="{ rawItem }">
<div :class="{ container: true, disabled: rawItem.disabled }">
<span>{{ rawItem.data.name }}</span>
</div>
</template>
</drag-grid>
<span>
<button @click="reset">Reset</button><br />
<button @click="showOverlayOnlyOnDragover = !showOverlayOnlyOnDragover">
Show overlay
{{ showOverlayOnlyOnDragover ? "always" : "only on dragover" }}</button
><br />
<button @click="showAllHighlights = !showAllHighlights">
{{
showAllHighlights
? "Only show overlay for dragged item"
: "Show overlay for all items"
}}
</button>
</span>
</div>
</template>
<style scoped>
#ov-grid,
#second-grid {
max-width: 600px;
border-radius: 1em;
border: 0.2em solid #e0e0e0;
box-shadow: 0.2em 0.2em 0 0.1em #bdc3c7;
padding: 0.3em 0.4em 0.4em 0.3em;
}
#second-grid {
width: fit-content;
height: 100%;
}
div {
display: flex;
flex-direction: row;
gap: 1em;
align-items: stretch;
}
.container {
background: #3498db;
color: #ecf0f1;
width: 100%;
height: 100%;
user-select: none;
text-align: center;
border-radius: 0.6em;
box-shadow: #2980b9 0.1em 0.1em 0 0.1em;
min-height: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
.container.disabled {
background: #bdc3c7;
box-shadow: #95a5a6 0.1em 0.1em 0 0.1em;
}
.container.goal {
background: #2ecc71;
box-shadow: #27ae60 0.1em 0.1em 0 0.1em;
}
button {
margin-top: 1em;
padding: 0.5em 1em;
border-radius: 0.5em;
border: 0.2em solid #e0e0e0;
background: #ecf0f1;
color: #3498db;
font-weight: bold;
cursor: pointer;
}
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment