From d578eecfc47bf2837b60ba73084b595be5bad99f Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 22:09:53 +0100
Subject: [PATCH] Calculate grid coordinates correctly (especially don't use
deprecated browser features)
---
src/DragGrid.vue | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 8922a0d..2b4ab41 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -145,7 +145,7 @@ export default {
let data = event.dataTransfer.getData("vueDrag/gridItem");
if (!data) return;
let element = JSON.parse(data);
- let coords = this.getCoords(event.layerX, event.layerY);
+ let coords = this.getCoords(event.pageX, event.pageY);
if (element.context !== this.context || this.noHighlight) {
this.$refs.highlightContainer.style.display = "none";
@@ -185,7 +185,7 @@ export default {
return;
}
- let coords = this.getCoords(event.layerX, event.layerY);
+ let coords = this.getCoords(event.pageX, event.pageY);
let newPositionValid = true;
@@ -233,9 +233,10 @@ export default {
this.$emit("itemChanged", element);
},
getCoords(x, y) {
+ let rect = this.$el.getBoundingClientRect();
return {
- x: Math.ceil(x / (this.$el.offsetWidth / this.cols)),
- y: Math.ceil(y / (this.$el.offsetHeight / this.rows)),
+ x: Math.ceil((x - rect.x - window.scrollX) / (rect.width / this.cols)),
+ y: Math.ceil((y - rect.y - window.scrollY) / (rect.height / this.rows)),
};
},
getInt(property, item) {
--
GitLab