From 469b39d031378200b2337851aaef765f359ca883 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 9 Feb 2023 13:36:23 +0100
Subject: [PATCH] Create lesson example
---
example/src/App.vue | 56 +++++++++++++++++++++++++++++++++++++++++----
1 file changed, 52 insertions(+), 4 deletions(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index 5750f67..49fd884 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -90,12 +90,25 @@ import NumberCounter from "./components/NumberCounter.vue";
:rows="parseInt(lesson1Rows)"
class="bordered"
context="lesson"
+ grid-id="lesson-plan"
@itemChanged="handleLessonMoved"
>
<template #item="item">
<div class="container">{{ item }}</div>
</template>
</drag-grid>
+ <drag-grid
+ :value="lessons1"
+ :cols="1"
+ :rows="10"
+ context="lesson"
+ grid-id="lesson-storage"
+ @itemChanged="handleLessonDropInContainer"
+ >
+ <template #item="item">
+ <div class="container">{{ item }}</div>
+ </template>
+ </drag-grid>
</div>
</div>
</template>
@@ -131,10 +144,18 @@ export default {
this.lesson2X = lesson.x;
this.lesson2Y = lesson.y;
break;
+ case "lesson3":
+ this.lesson3X = lesson.x;
+ this.lesson3Y = lesson.y;
+ this.lesson3inPlan = true;
+ break;
default:
console.error("Something is wrong here!");
}
},
+ handleLessonDropInContainer(lesson) {
+ if (lesson.key === "lesson3") this.lesson3inPlan = false;
+ },
},
data() {
return {
@@ -180,14 +201,21 @@ export default {
lesson1Y: 1,
lesson2X: 2,
lesson2Y: 1,
+ lesson3X: -1,
+ lesson3Y: -1,
+ lesson3inPlan: false,
};
},
computed: {
lessons1() {
return [
{
- x: this.lesson1X,
- y: this.lesson1Y,
+ x: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
+ },
+ y: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
+ },
w: 1,
h: this.lesson1Length,
key: "lesson1",
@@ -195,14 +223,34 @@ export default {
},
{
x: (grid) => {
- return grid.context === "lesson" ? this.lesson2X : 1;
+ return grid.gridId === "lesson-plan" ? this.lesson2X : 0;
+ },
+ y: (grid) => {
+ return grid.gridId === "lesson-plan" ? this.lesson2Y : 0;
},
- y: this.lesson2Y,
w: 1,
h: parseInt(this.lesson1Length) + 1,
key: "lesson2",
data: {},
},
+ {
+ x: (grid) => {
+ if (this.lesson3inPlan) {
+ return grid.gridId === "lesson-plan" ? this.lesson3X : -1;
+ }
+ return grid.gridId === "lesson-plan" ? -1 : 0;
+ },
+ y: (grid) => {
+ if (this.lesson3inPlan) {
+ return grid.gridId === "lesson-plan" ? this.lesson3Y : -1;
+ }
+ return grid.gridId === "lesson-plan" ? -1 : 0;
+ },
+ w: 1,
+ h: parseInt(this.lesson1Length) + 1,
+ key: "lesson3",
+ data: {},
+ },
];
},
},
--
GitLab