From 943c7fc54c771f90127d4204f3adcc59a8607afe Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 16 Feb 2023 12:18:12 +0100
Subject: [PATCH] Calculate new position better by using mouse coordinates as
well
---
src/DragContainer.vue | 3 +++
src/DragGrid.vue | 14 ++++++++++----
2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 2e657c6..df4a865 100644
--- a/src/DragContainer.vue
+++ b/src/DragContainer.vue
@@ -17,6 +17,7 @@ export default {
handleDragStart(event) {
if (this.isDisabled) return;
this.$refs.wrapper.style.cursor = "grabbing";
+ let rect = event.target.getBoundingClientRect();
event.dataTransfer.setData(
"vueDrag/gridItem",
JSON.stringify({
@@ -28,6 +29,8 @@ export default {
data: this.data,
context: this.context,
originGridId: this.gridId,
+ mouseX: event.clientX - rect.x - rect.width / (2 * this.w), // relative to center of the top left square
+ mouseY: event.clientY - rect.y - rect.height / (2 * this.h),
})
);
},
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index c5f4707..78a6cb7 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -146,7 +146,10 @@ export default {
let data = event.dataTransfer.getData("vueDrag/gridItem");
if (!data) return;
let element = JSON.parse(data);
- let coords = this.getCoords(event.pageX, event.pageY);
+ let coords = this.getCoords(
+ event.clientX - element.mouseX,
+ event.clientY - element.mouseY
+ );
if (element.context !== this.context || this.noHighlight) {
this.$refs.highlightContainer.style.display = "none";
@@ -186,7 +189,10 @@ export default {
return;
}
- let coords = this.getCoords(event.pageX, event.pageY);
+ let coords = this.getCoords(
+ event.clientX - element.mouseX,
+ event.clientY - element.mouseY
+ );
let newPositionValid = true;
@@ -236,8 +242,8 @@ export default {
getCoords(x, y) {
let rect = this.$el.getBoundingClientRect();
return {
- x: Math.ceil((x - rect.x - window.scrollX) / (rect.width / this.cols)),
- y: Math.ceil((y - rect.y - window.scrollY) / (rect.height / this.rows)),
+ x: Math.ceil((x - rect.x) / (rect.width / this.cols)),
+ y: Math.ceil((y - rect.y) / (rect.height / this.rows)),
};
},
getInt(property, item) {
--
GitLab