dnd, sort in dst, drag from src

dnd-with-placeholder.vue

<template>
  <div class="row">
    <div class="col">
      <h3>src</h3>
      <div>
        <div
          v-for="el in srcList"
          :key="el.id"
          draggable="true"
          @dragstart="dragStart(el.id, $event)"
        >
          {{ el.id }}
        </div>
      </div>
    </div>

    <div class="col">
      <h3>dst</h3>
      <div class="grid-container">
        <template v-for="el in dstList">
          <div
            class="cell"
            :class="el.area"
            :key="el.area"
            :data-over="el.over"
            @drag="sortStart(el)"
            @dragenter="dragOver(el)"
            @dragover.prevent="dragging"
            @dragleave.prevent="el.over = false"
            @drop.stop="drop(el)"
            :draggable="el.component ? true : false"
          >
            {{ el.component || "+" }}
            <strong v-if="el.component" @click="el.component = ''"
              >&times;</strong
            >
          </div>
        </template>
        <div class="chart"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dstList: Array(8)
        .fill(0)
        .map((_, i) => {
          return {
            area: String.fromCharCode(65 + i),
            component: "",
            over: false,
          };
        }),
      srcList: Array(8)
        .fill(0)
        .map((_, i) => {
          return { id: String.fromCharCode(65 + i) };
        }),
      draggingID: "",
      sortingID: "",
    };
  },
  computed: {},
  methods: {
    dragStart(draggingID, evt) {
      if (this.dstList.some((_) => _.component === draggingID)) {
        return evt.preventDefault();
      } else {
        this.draggingID = draggingID;
      }
    },
    drop(placeholder) {
      // check sort or drag from src
      if (this.sortingID) {
        // swap it
        if (placeholder.component) {
          const sortingEl = this.dstList.find(
            (_) => _.component === this.sortingID
          );
          [sortingEl.component, placeholder.component] = [
            placeholder.component,
            sortingEl.component,
          ];
        } else {
          // move to it
          this.dstList.find((_) => _.component === this.sortingID).component =
            "";
          placeholder.component = this.sortingID;
        }
      } else {
        placeholder.component = this.draggingID;
      }

      // reset
      placeholder.over = false;
      this.draggingID = "";
      this.sortingID = "";
    },
    dragOver(el) {
      this.dstList.map((_) => (_.over = false));
      el.over = true;
    },
    // for @drop working
    dragging(evt) {
      evt.preventDefault();
      return false;
    },
    sortStart(el) {
      this.sortingID = el.component;
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  .col + .col {
    margin-left: 3em;
  }
}
.cell {
  width: 6em;
  height: 2em;
  margin-bottom: 0.5em;
  border: 1px dashed #ccc;

  &[data-over] {
    background: lightblue;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-template-areas:
    "A chart chart H"
    "B chart chart G"
    "C D E F";
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}

.G {
  grid-area: G;
}

.H {
  grid-area: H;
}

.chart {
  grid-area: chart;
}
</style>