[Vue.js] Drag & Drop をやってみた

{
  decks: [
    {id: 1, name: "Deck 1", cards: [
      {id: 1, name: "C 1"},
      {id: 2, name: "C 2"},
      {id: 3, name: "C 3"},
      {id: 4, name: "C 4"},
      {id: 5, name: "C 5"}
    ]},
    {id: 2, name: "Deck 2", cards: []},
  ],
}

<!-- デッキ枠 全体をドロップエリアとする -->
<div class="deck"
  v-for="deck in decks" :key="deck.id"
  @dragover="dragOver(deck)"
>
  <div class="heading">
    {{ deck.name }}
  </div>
  <div class="card-wrap">
    <!-- カード draggableを定義 -->
    <div class="card"
      draggable="true"
      v-for="card in relationMap[deck.id]" :key="card.id"
      @dragstart="dragStart(card, $event)"
      @dragend="dragEnd"
    >{{ card.name }}</div>
  </div>
</div>

let map = {}
for (let index in this.decks) {
  let deck = this.decks[index];
  map[deck.id] = deck.cards
}

this.relationMap = map

export default {
  data() {
    return {
      relationMap   : {},
      draggingCardId: null,
      enterDeckId   : null
    }
  },
  methods: {
    dragStart(card, e) {
      // ドラッグ中のカードIDを保持し、ドラッグ要素を半透明にする
      this.draggingCardId    = card.id
      e.target.style.opacity = 0.5
    },
    dragEnd(e) {
      // ドラッグ中の要素情報、関係データを書き換える
      this.relationMap = this.moveDeck(
        this.relationMap,
        this.draggingCardId,
        this.enterDeckId
      )

      // 一時編集を初期化し、ドラッグ中の要素を半透明から戻す
      this.enterDeckId       = null
      this.draggingCardId    = null
      e.target.style.opacity = 1
    },
    dragOver(deck) {
      // ドラッグ中要素がいま重なっているデッキのIDを保持
      this.enterDeckId = deck.id
    },
    moveDeck(map, targetCardId, afterDeckId) {
      // targetCardId を今入っているデッキから削除し、新しいデッキに追加する
      // あまり美しくなくてごめんね
      for (let deckId in map) {
        for (let ci=0; ci<map[deckId].length; ci++) {
          let card = map[deckId][ci]
          if (card.id == targetCardId) {
            if (deckId != afterDeckId) {
              map[deckId].splice(ci, 1)
              map[afterDeckId].push(card)
            }
            break
          }
        }
      }
      return map
    }
  }
}

draggable="true"

dragStart(card, e) {
  // ドラッグ中のカードIDを保存し、ドラッグ要素を半透明にする
  this.draggingCardId    = card.id
  e.target.style.opacity = 0.5
},

dragOver(deck) {
  this.enterDeckId = deck.id
},