<template>
  <div @dragstart="handleDragStart" draggable="true" id="wrapper">
    <slot>
      <div id="container">
        <dl>
          <dt>Key</dt>
          <dd>{{ dragID }}</dd>
          <dt>Position</dt>
          <dd>{{ x }}, {{ y }}</dd>
          <dt>Size</dt>
          <dd>{{ w }} × {{ h }}</dd>
        </dl>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: "DragContainer",
  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,
        })
      );
    },
  },
  props: {
    dragID: String,
    x: Number,
    y: Number,
    w: Number,
    h: Number,
  },
};
</script>

<style scoped>
#wrapper {
  grid-column: v-bind(x) / span v-bind(w);
  grid-row: v-bind(y) / span v-bind(h);
}

#container {
  background: lightcoral;
  width: 100%;
  height: 100%;
}
</style>