Calculate new position better by using mouse coordinates as well

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),
         })
       );
     },

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) {