Example5Colors.vue

<script setup>
import DragGrid from "../../src/DragGrid.vue";
</script>

<template>
  <div class="row">
    <drag-grid
      :value="colorGrid"
      :cols="4"
      :rows="4"
      grid-id="gridA"
      context="colors"
      class="bordered color-grid"
      @itemChanged="handleColorItemChange"
    >
      <template #item="item">
        <div
          :style="{
            background: item.rawItem.getColor('red'),
            color: 'white',
          }"
        >
          {{ item.data.name }}
        </div>
      </template>
    </drag-grid>
    <drag-grid
      :value="colorGrid"
      :cols="4"
      :rows="4"
      grid-id="gridB"
      context="colors"
      class="bordered color-grid"
      @itemChanged="handleColorItemChange"
    >
      <template #item="item">
        <div
          :style="{
            background: item.rawItem.getColor('green'),
            color: 'black',
          }"
        >
          {{ item.data.name }}
        </div>
      </template>
    </drag-grid>
    <drag-grid
      :value="colorGrid"
      :cols="4"
      :rows="4"
      grid-id="gridC"
      context="colors"
      class="bordered color-grid"
      @itemChanged="handleColorItemChange"
    >
      <template #item="item">
        <div
          :style="{
            background: item.rawItem.getColor('red'),
            color: 'white',
          }"
        >
          {{ item.data.name }}
        </div>
      </template>
    </drag-grid>
  </div>
</template>

<script>
export default {
  name: "Example5Colors",
  methods: {
    contains(array, search) {
      return array.filter((obj) => obj === search).length > 0;
    },
    findAndRemove(array, element) {
      let index = array.findIndex((i) => {
        return i === element;
      });
      if (index >= 0) array.splice(index, 1);
    },
    handleColorItemChange(item) {
      this[item.key].x = item.x;
      this[item.key].y = item.y;

      if (item.gridId === item.originGridId) return;

      switch (item.gridId) {
        case "gridA":
          // Moved to gridA
          this.findAndRemove(
            item.originGridId === "gridB" ? this.placedB : this.placedC,
            item.key
          );
          this.placedA.push(item.key);
          break;
        case "gridB":
          // Moved to gridB
          this.findAndRemove(
            item.originGridId === "gridA" ? this.placedA : this.placedC,
            item.key
          );
          this.placedB.push(item.key);
          break;
        case "gridC":
          // Moved to gridC
          this.findAndRemove(
            item.originGridId === "gridB" ? this.placedB : this.placedA,
            item.key
          );
          this.placedC.push(item.key);
          break;
      }
    },
  },
  data() {
    return {
      placedA: ["item1", "item2"],
      placedB: ["item3", "item4"],
      placedC: ["item5", "item6"],
      item1: {
        x: 1,
        y: 1,
      },
      item2: {
        x: 2,
        y: 2,
      },
      item3: {
        x: 1,
        y: 1,
      },
      item4: {
        x: 3,
        y: 3,
      },
      item5: {
        x: 2,
        y: 4,
      },
      item6: {
        x: 4,
        y: 2,
      },
    };
  },
  computed: {
    colorGrid() {
      let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
      let greens = [
        "green",
        "seagreen",
        "greenyellow",
        "darkolivegreen",
        "limegreen",
        "palegreen",
      ];
      let reds = [
        "darkred",
        "indianred",
        "orangered",
        "red",
        "maroon",
        "firebrick",
      ];
      return items.map((itemName) => {
        return {
          key: itemName,
          x: (grid) => {
            if (grid.gridId === "gridA") {
              return this.contains(this.placedA, itemName)
                ? this[itemName].x
                : -1;
            } else if (grid.gridId === "gridB") {
              return this.contains(this.placedB, itemName)
                ? this[itemName].x
                : -1;
            } else {
              // gridC
              return this.contains(this.placedC, itemName) ? 0 : -1;
            }
          },
          y: (grid) => {
            if (grid.gridId === "gridA") {
              return this.contains(this.placedA, itemName)
                ? this[itemName].y
                : -1;
            } else if (grid.gridId === "gridB") {
              return this.contains(this.placedB, itemName)
                ? this[itemName].y
                : -1;
            } else {
              // gridC
              return this.contains(this.placedC, itemName) ? 0 : -1;
            }
          },
          w: 1,
          h: 1,
          data: {
            name: itemName,
          },
          getColor: (a) =>
            a === "red"
              ? reds[parseInt(itemName[4]) - 1]
              : greens[parseInt(itemName[4]) - 1],
        };
      });
    },
  },
};
</script>

<style scoped>
.row {
  display: flex;
  justify-content: space-between;
}

.bordered {
  border: 2px solid grey;
}

.color-grid {
  min-height: 11em;
  line-height: 2em;
  box-sizing: content-box;
}
</style>