diff --git a/src/Grid.vue b/src/Grid.vue index e52fdf8093c4cea23502dd8e282d055efd81c646..8b9d4cd0853a16f71d9d65f8f73c4ab39fb52ee1 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -37,13 +37,43 @@ export default { type: Number, required: true, }, + posValidation: { + type: Function, + required: false, + }, }, methods: { + positionAllowed(x, y, key) { + for (let item of this.items) { + if (key === item.key) continue; + if (x >= item.x && x < item.x + item.w) { + if (y >= item.y && y < item.y + item.h) { + return false; + } + } + } + if (this.posValidation) return this.posValidation(x, y); + return true; + }, handleDragOver(event) { let data = event.dataTransfer.getData("vueDrag/gridItem"); let element = JSON.parse(data); let coords = this.getCoords(event.layerX, event.layerY); + let newPositionValid = true; + + for (let x = coords.x; x < coords.x + element.w; x++) { + for (let y = coords.y; y < coords.y + element.h; y++) { + newPositionValid = this.positionAllowed(x, y, element.key); + if (!newPositionValid) break; + } + } + + if (!newPositionValid) { + this.$refs.highlight.style.display = "none"; + return; + } + this.$refs.highlight.style.display = "block"; this.$refs.highlight.style.gridColumnStart = coords.x + ""; this.$refs.highlight.style.gridRowStart = coords.y + ""; @@ -55,13 +85,27 @@ export default { let data = event.dataTransfer.getData("vueDrag/gridItem"); let element = JSON.parse(data); console.log(element); + + let coords = this.getCoords(event.layerX, event.layerY); + + let newPositionValid = true; + + for (let x = coords.x; x < coords.x + element.w; x++) { + for (let y = coords.y; y < coords.y + element.h; y++) { + newPositionValid = this.positionAllowed(x, y, element.key); + if (!newPositionValid) break; + } + } + + if (!newPositionValid) return; + this.items.splice( this.items.findIndex((i) => { return i.key === element.key; }), 1 ); - let coords = this.getCoords(event.layerX, event.layerY); + element.x = coords.x; element.y = coords.y; this.items.push(element);