diff --git a/src/DragContainer.vue b/src/DragContainer.vue index 14ca96cfd80c9bd5b82c982764c3cc35a5cec72f..81adf9cb622966d04f10ddae9642490bdffa651e 100644 --- a/src/DragContainer.vue +++ b/src/DragContainer.vue @@ -21,16 +21,14 @@ export default { methods: { handleDragStart(event) { event.dataTransfer.setData( - "vueDrag/gridItem", - JSON.stringify( - { - key: this.dragID, - x: this.x, - y: this.y, - w: this.w, - h: this.h - } - ) + "vueDrag/gridItem", + JSON.stringify({ + key: this.dragID, + x: this.x, + y: this.y, + w: this.w, + h: this.h, + }) ); }, }, diff --git a/src/Grid.vue b/src/Grid.vue index 7011fd74ee72f02fe2a97265fc2d2dc3e6e3e600..d65134e717048f49f9a5c0429f23ad9ec568c5f3 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -39,9 +39,16 @@ export default { let data = event.dataTransfer.getData("vueDrag/gridItem"); let element = JSON.parse(data); console.log(element); - this.items.splice(this.items.findIndex((i) => {return i.key === element.key}), 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)); + this.items.splice( + this.items.findIndex((i) => { + return i.key === element.key; + }), + 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)); this.items.push(element); }, },