<template>
  <div @dragstart="handleDragStart">
    <slot>
      <div id="container"></div>
    </slot>
  </div>
</template>

<script>
export default {
  name: "DragContainer",
  methods: {
    handleDragStart(event) {
      event.dataTransfer.setData("text", event.target.id);
    }
  }
}
</script>

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