DragContainer.vue

<template>
  <div @dragstart="handleDragStart" draggable="true" id="wrapper">
    <slot></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,
          data: this.data,
        })
      );
    },
  },
  props: {
    dragID: String,
    x: Number,
    y: Number,
    w: Number,
    h: Number,
    data: Object,
  },
};
</script>

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