diff --git a/src/Grid.vue b/src/Grid.vue index d65134e717048f49f9a5c0429f23ad9ec568c5f3..e52fdf8093c4cea23502dd8e282d055efd81c646 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -1,7 +1,11 @@ <template> - <div @dragover.prevent @drop.prevent="handleDrop" class="grid"> + <div + @dragover.prevent="handleDragOver" + @drop.prevent="handleDrop" + class="grid" + > <slot name="highlight"> - <div id="highlight"></div> + <div id="highlight" ref="highlight"></div> </slot> <DragContainer v-for="item in items" @@ -35,7 +39,19 @@ export default { }, }, methods: { + handleDragOver(event) { + let data = event.dataTransfer.getData("vueDrag/gridItem"); + let element = JSON.parse(data); + let coords = this.getCoords(event.layerX, event.layerY); + + this.$refs.highlight.style.display = "block"; + this.$refs.highlight.style.gridColumnStart = coords.x + ""; + this.$refs.highlight.style.gridRowStart = coords.y + ""; + this.$refs.highlight.style.gridColumnEnd = "span " + element.w; + this.$refs.highlight.style.gridRowEnd = "span " + element.h; + }, handleDrop(event) { + this.$refs.highlight.style.display = "none"; let data = event.dataTransfer.getData("vueDrag/gridItem"); let element = JSON.parse(data); console.log(element); @@ -45,12 +61,17 @@ export default { }), 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)); + let coords = this.getCoords(event.layerX, event.layerY); + element.x = coords.x; + element.y = coords.y; this.items.push(element); }, + getCoords(x, y) { + return { + x: Math.ceil(x / (this.$el.offsetWidth / this.cols)), + y: Math.ceil(y / (this.$el.offsetHeight / this.rows)), + }; + }, }, data() { return { @@ -68,6 +89,11 @@ export default { #highlight { background: darkgrey; border: grey dashed 2px; + display: none; + transition: all 2s ease-in-out; + z-index: -1; + pointer-events: none; + user-select: none; } .grid {