Calculate grid coordinates correctly (especially don't use deprecated browser features)

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