ダッシュで奪取

自分用のメモ

【Vue.Draggable】二列間の移動

この記事の目標
  • 項目ドラッグで、リスト間の列移動ができるところまで
環境
  • Vue.js 2.6.11

  • Vue.Draggable 2.23.2

目次

  1. 全体
  2. ポイント
  3. 参考URL

1. 全体

<template>
  <div class="draggable">
    <div class="d-flex">
      <!-- ポケモン -->
      <div class="col-4">
        <h6 class="font-weight-bold">ポケモン</h6>
        <draggable group="monsters" tag="ul" class="list-group" :list="pokemons">
          <li class="list-group-item" v-for="pokemon in pokemons" :key="pokemon.no">
            {{ pokemon.name }}
          </li>
        </draggable>
      </div>
      <!-- デジモン -->
      <div class="col-4">
        <h6 class="font-weight-bold">デジモン</h6>
        <draggable group="monsters" tag="ul" class="list-group" :list="digimons">
          <li class="list-group-item" v-for="digimon in digimons" :key="digimon.no">
            {{ digimon.name }}
          </li>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      pokemons: [
        { no: '001', name: 'フシギダネ' },
        { no: '004', name: 'ヒトカゲ' },
        { no: '007', name: 'ゼニガメ' },
        { no: '025', name: 'ピカチュウ' }
      ],
      digimons: [
        { no: '111', name: 'アグモン' },
        { no: '222', name: 'カブテリモン' },
        { no: '333', name: 'エンジェウーモン' },
        { no: '444', name: 'セントガルゴモン' }
      ]
    }
  }
}
</script>

<style scoped>
li {
  cursor: pointer;
}
</style>
  • ポケモンリストとデジモンリストについて、ドラッグで列間移動できる

f:id:kyoruni:20200121233222g:plain

2. ポイント

  • <draggable>に、group="任意のグループ名" を付与する

  • 同じ名前のグループ同士は、列間の移動ができるようになる

// 4:
<!-- ポケモン -->
<div class="col-4">
  <h6 class="font-weight-bold">ポケモン</h6>
  <draggable group="monsters" tag="ul" class="list-group" :list="pokemons">
// 13:
<!-- デジモン -->
<div class="col-4">
  <h6 class="font-weight-bold">デジモン</h6>
  <draggable group="monsters" tag="ul" class="list-group" :list="digimons">

↑ ポケモンとデジモンのリストそれぞれに、monstersグループを付与しています

3. 参考URL