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

 1{
 2  decks: [
 3    {id: 1, name: "Deck 1", cards: [
 4      {id: 1, name: "C 1"},
 5      {id: 2, name: "C 2"},
 6      {id: 3, name: "C 3"},
 7      {id: 4, name: "C 4"},
 8      {id: 5, name: "C 5"}
 9    ]},
10    {id: 2, name: "Deck 2", cards: []},
11  ],
12}
13

 1<!-- デッキ枠 全体をドロップエリアとする -->
 2<div class="deck"
 3  v-for="deck in decks" :key="deck.id"
 4  @dragover="dragOver(deck)"
 5>
 6  <div class="heading">
 7    {{ deck.name }}
 8  </div>
 9  <div class="card-wrap">
10    <!-- カード draggableを定義 -->
11    <div class="card"
12      draggable="true"
13      v-for="card in relationMap[deck.id]" :key="card.id"
14      @dragstart="dragStart(card, $event)"
15      @dragend="dragEnd"
16    >{{ card.name }}</div>
17  </div>
18</div>

1let map = {}
2for (let index in this.decks) {
3  let deck = this.decks[index];
4  map[deck.id] = deck.cards
5}
6
7this.relationMap = map
8

 1export default {
 2  data() {
 3    return {
 4      relationMap   : {},
 5      draggingCardId: null,
 6      enterDeckId   : null
 7    }
 8  },
 9  methods: {
10    dragStart(card, e) {
11      // ドラッグ中のカードIDを保持し、ドラッグ要素を半透明にする
12      this.draggingCardId    = card.id
13      e.target.style.opacity = 0.5
14    },
15    dragEnd(e) {
16      // ドラッグ中の要素情報、関係データを書き換える
17      this.relationMap = this.moveDeck(
18        this.relationMap,
19        this.draggingCardId,
20        this.enterDeckId
21      )
22
23      // 一時編集を初期化し、ドラッグ中の要素を半透明から戻す
24      this.enterDeckId       = null
25      this.draggingCardId    = null
26      e.target.style.opacity = 1
27    },
28    dragOver(deck) {
29      // ドラッグ中要素がいま重なっているデッキのIDを保持
30      this.enterDeckId = deck.id
31    },
32    moveDeck(map, targetCardId, afterDeckId) {
33      // targetCardId を今入っているデッキから削除し、新しいデッキに追加する
34      // あまり美しくなくてごめんね
35      for (let deckId in map) {
36        for (let ci=0; ci<map[deckId].length; ci++) {
37          let card = map[deckId][ci]
38          if (card.id == targetCardId) {
39            if (deckId != afterDeckId) {
40              map[deckId].splice(ci, 1)
41              map[afterDeckId].push(card)
42            }
43            break
44          }
45        }
46      }
47      return map
48    }
49  }
50}
51

1draggable="true"

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

1dragOver(deck) {
2  this.enterDeckId = deck.id
3},
4