From a733304f1ea392bfa5551bb05d98a1539d123631 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 6 Feb 2023 14:23:06 +0100
Subject: [PATCH] Display highlight
---
src/Grid.vue | 38 ++++++++++++++++++++++++++++++++------
1 file changed, 32 insertions(+), 6 deletions(-)
diff --git a/src/Grid.vue b/src/Grid.vue
index d65134e..e52fdf8 100644
--- a/src/Grid.vue
+++ b/src/Grid.vue
@@ -1,7 +1,11 @@
<template>
- <div @dragover.prevent @drop.prevent="handleDrop" class="grid">
+ <div
+ @dragover.prevent="handleDragOver"
+ @drop.prevent="handleDrop"
+ class="grid"
+ >
<slot name="highlight">
- <div id="highlight"></div>
+ <div id="highlight" ref="highlight"></div>
</slot>
<DragContainer
v-for="item in items"
@@ -35,7 +39,19 @@ export default {
},
},
methods: {
+ handleDragOver(event) {
+ let data = event.dataTransfer.getData("vueDrag/gridItem");
+ let element = JSON.parse(data);
+ let coords = this.getCoords(event.layerX, event.layerY);
+
+ this.$refs.highlight.style.display = "block";
+ this.$refs.highlight.style.gridColumnStart = coords.x + "";
+ this.$refs.highlight.style.gridRowStart = coords.y + "";
+ this.$refs.highlight.style.gridColumnEnd = "span " + element.w;
+ this.$refs.highlight.style.gridRowEnd = "span " + element.h;
+ },
handleDrop(event) {
+ this.$refs.highlight.style.display = "none";
let data = event.dataTransfer.getData("vueDrag/gridItem");
let element = JSON.parse(data);
console.log(element);
@@ -45,12 +61,17 @@ export default {
}),
1
);
- element.x =
- 1 + Math.trunc(event.layerX / (event.target.offsetWidth / this.cols));
- element.y =
- 1 + Math.trunc(event.layerY / (event.target.offsetHeight / this.rows));
+ let coords = this.getCoords(event.layerX, event.layerY);
+ element.x = coords.x;
+ element.y = coords.y;
this.items.push(element);
},
+ getCoords(x, y) {
+ return {
+ x: Math.ceil(x / (this.$el.offsetWidth / this.cols)),
+ y: Math.ceil(y / (this.$el.offsetHeight / this.rows)),
+ };
+ },
},
data() {
return {
@@ -68,6 +89,11 @@ export default {
#highlight {
background: darkgrey;
border: grey dashed 2px;
+ display: none;
+ transition: all 2s ease-in-out;
+ z-index: -1;
+ pointer-events: none;
+ user-select: none;
}
.grid {
--
GitLab