<template>
  <div @dragover.prevent @drop.prevent="">
    <slot name="highlight">
      <div id="highlight"></div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'Grid',
  props: {
    rows: {
      type: Number,
      required: true,
    },
    cols: {
      type: Number,
      required: true,
    },
  },
  methods: {
    handleDrop(event) {
      let data = event.dataTransfer.getData("text");
      event.target.appendChild(document.getElementById(data));
    }
  }
}
</script>

<style scoped>
#highlight {
  background: darkgrey;
  border: grey dashed 2px;
}
</style>