DragContainer.vue

<template>
  <div
    @dragstart="handleDragStart"
    :draggable="!isDisabled"
    id="wrapper"
    ref="wrapper"
    @dragend="handleDragEnd"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "DragContainer",
  methods: {
    handleDragStart(event) {
      if (this.isDisabled) return;
      this.$refs.wrapper.style.cursor = "grabbing";
      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,
          context: this.context,
          originGridId: this.gridId,
        })
      );
    },
    handleDragEnd() {
      this.$refs.wrapper.style.cursor = "grab";
    },
  },
  props: {
    dragID: {
      type: String,
      required: true,
    },
    x: {
      type: Number,
      required: true,
    },
    y: {
      type: Number,
      required: true,
    },
    w: {
      type: Number,
      required: true,
    },
    h: {
      type: Number,
      required: true,
    },
    data: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    context: {
      type: String,
      required: true,
    },
    gridId: {
      type: String,
      required: true,
    },
    disabled: Boolean,
  },
  computed: {
    isInGrid() {
      return this.x >= 0 && this.y >= 0;
    },
    isNotInGrid() {
      return this.x === -1 || this.y === -1;
    },
    getX() {
      return this.x === 0 ? "auto" : this.x;
    },
    getY() {
      return this.y === 0 ? "auto" : this.y;
    },
    getDisplay() {
      return this.isInGrid ? "block" : "none";
    },
    isDisabled() {
      return this.disabled || this.isNotInGrid;
    },
    cursor() {
      return this.disabled ? "auto" : "grab";
    },
  },
};
</script>

<style scoped>
#wrapper {
  grid-column: v-bind(getX) / span v-bind(w);
  grid-row: v-bind(getY) / span v-bind(h);
  display: v-bind(getDisplay);
  cursor: v-bind(cursor);
}
</style>