Vueでアイテムをドラッグ＆ドロップで並べ替えしたいとき

インストール

npm i -s vuedraggable

ソース

• draggableで囲んだアイテムがドラッグ＆ドロップの対象になる
• groupを指定すると別々に用意したdraggable内のアイテムが入れ替え可能になる

DraggAndDrop.vue

<template>
  <div id="app">
    <div class="box">
      <draggable v-model="array01" group="group1">
        <div v-for="element in array01" :key="element.id" class="item">
            {{element.name}}
        </div>
      </draggable>
    </div>
    <div class="box">
      <draggable v-model="array02" group="group1">
        <div v-for="element in array02" :key="element.id" class="item">
            {{element.name}}
        </div>
      </draggable>
    </div>
    <div class="box">
      <draggable v-model="array03">
        <div v-for="element in array03" :key="element.id" class="item">
            {{element.name}}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DraggAndDrop',
  components: {
      draggable,
  },
  data: () => {
    return {
      array01: [
        { id:'id01', name:'ジャガイモ' },
        { id:'id02', name:'玉ねぎ' },
        { id:'id03', name:'人参' },
      ],
      array02: [
        { id:'id04', name:'牛肉' },
        { id:'id05', name:'豚肉' },
      ],
      array03: [
        { id:'id06', name:'肉まん' },
        { id:'id07', name:'餃子' },
      ]
    }
  }
}
</script>

<style>
.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  background: #FFF;
  border: solid 3px #6091d3;
  border-radius: 10px;
}
.item {
  padding: 10px;
  border: solid #ddd 1px;
  border-radius: 10px;
}
</style>

実行

ドラッグ＆ドロップ操作後の画面