Vue.jsでドラッグアンドドロップによる要素の並べ替えと移動を実装する

公開： 2019年5月18日

カテゴリ： JavaScript Vue.js
タグ： JavaScript,Vue,VueCLI,dnd

Vue.jsを用いてアプリケーションを構築するというのは、サスティナブルかつ拡張性に優れたコードを実現しながらも、ユーザーに快適な動作や体験を提供するという目的もあると思います。

そんな優良なユーザー体験を提供する為のフロントエンド実装において、ドラッグアンドドロップ（以下、dnd）を用いた要素移動インタラクションは有効なアプローチの１つです。

今回は、Vue.Draggableというパッケージを用いて、時間をかけず簡単にdndを実装していきます。

アジェンダ

開発環境
Vue.Draggable
インストール
基本的なdnd
異なるリスト間の移動・並べ替え
異なるコンポーネント間での移動・並べ替え
イベント

開発環境

今回の開発環境は以下の通りです。

Vue.js 2.x
Vue CLI 3.x
Node.js 12.x
npm 6.5

今回はSFC（単一ファイルコンポーネント）を単体で動かすので、インスタントプロトタイピングの為のグローバルアドオン「cli-service-global」をインストールしておいてください。

尚、Vue CLIを使った開発環境構築の詳細については以下からも確認できます
Vue CLIでVue.jsの開発環境をサクッと構築する

Vue.Draggable

Vue.Draggableは、dndおよびビューモデル配列との同期を可能にするVueコンポーネントです。
https://github.com/SortableJS/Vue.Draggable

Sortable.js機能のフルサポート
- タッチデバイスをサポート
- ドラッグハンドルと選択可能なテキストをサポート
- スマート自動スクロール
- 異なるリスト間のドラッグアンドドロップをサポート
- jQueryに依存しない
HTMLを同期してモデルリストを表示する
Vue.js 2.0遷移グループと互換性あり
キャンセルサポート
完全な制御が必要なときに変更を報告するイベント
既存のUIライブラリコンポーネントを再利用し、tagとcomponentDataのpropを使用してそれらをドラッグ可能にする

もともとはSortable.jsをVue用に移植したもので、 FWを用いない実装やjQueryを使っていた時などでもお世話になった人も多いかと思います。

インストール

Vue.Draggableをインストールします。プロジェクトルートにてnpmでインストールします。

npm i vuedraggable

基本的なdnd

まずは最もベーシックなリストの並び替えを行います。

dnd1.vue

<template>
  <div>
    <draggable :options="options">
      <div class="item" v-for="item in items" :key="item.id">{{item.name}}</div>
    </draggable>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
      name: "dnd",
      components: { draggable },
      data () {
          return {
              options: {
                  animation: 200
              },
              items: [
                  { id: 1, name: 'name01' },
                  { id: 2, name: 'name02' },
                  { id: 3, name: 'name03' },
                  { id: 4, name: 'name04' },
                  { id: 5, name: 'name05' }
              ]
          }
      }
  }
</script>

<style scoped>
  .item {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #ffffff;
  }
  .item:hover {
    cursor: grab;
  }
  .item:active {
    cursor: grabbing;
  }
</style>

script

Vue.Draggableをインポートし、利用コンポーネントに登録しています。
dataオプションにてoptionプロパティを設定する事で、オプションの挙動を指定できます。ここでは、要素の並べ替えや移動が行われる際にアニメーション（滑らかに移動）を付与しています。
itemsプロパティでは、並び替えを行うアイテムリストを定義しています。

template

インポートしたdraggableコンポーネントを展開しています。
optionsカスタムディレクティブ（bind）を設定する事で、scripts側で定義したオプションが反映されます。
div要素でループを設定し、アイテムのリストを描画します。

実装したら、以下のvueコマンドを叩いて、プレビューしてみてください。

vue serve dnd1.vue --open

ベーシックなdnd動作確認

スムーズなドラッグアンドドロップが実現できたと思います。
サンプルページ

異なるリスト間の移動・並べ替え

今度は、複数のリストでの並べ替えや移動を行ってみます。これも、少し追加するだけで実現可能です。

dnd2.vue

<template>
  <div>
    <div>
      <h3>グループA</h3>
      <draggable v-model="itemsA" group="myGroup" @start="drag=true" @end="drag=false" :options="options">
        <div class="item" v-for="item in itemsA" :key="item.id">{{item.name}}</div>
      </draggable>
    </div>
    <div>
      <h3>グループB</h3>
      <draggable v-model="itemsB" group="myGroup" @start="drag=true" @end="drag=false" :options="options">
        <div class="item" v-for="item in itemsB" :key="item.id">{{item.name}}</div>
      </draggable>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
      name: "dnd",

      components: { draggable },

      data () {
          return {
              options: {
                  group: "myGroup",
                  animation: 200
              },
              itemsA: [
                  { id: 1, name: 'name01' },
                  { id: 2, name: 'name02' },
                  { id: 3, name: 'name03' },
                  { id: 4, name: 'name04' },
                  { id: 5, name: 'name05' }
              ],
              itemsB: [
                  { id: 6, name: 'name06' },
                  { id: 7, name: 'name07' },
                  { id: 8, name: 'name08' },
                  { id: 9, name: 'name09' },
                  { id: 10, name: 'name10' }
              ]
          }
      }
  }
</script>

<style scoped>
  .item {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #ffffff;
  }
  .item:hover {
    cursor: grab;
  }
  .item:active {
    cursor: grabbing;
  }
</style>

script

２つ目のアイテムリストを追加しています
dataオプションのoptionsプロパティで group: "myGroup" を追加しています

template

２つ目のリストを追加しています
２つのリストにそれぞれ group="myGroup" を追加しています

これだけです。以下のvueコマンドを叩いて、プレビューしてみてください。

vue serve dnd2.vue --open

グループ間のdnd動作確認

グループ間での要素移動が行える事が確認できると思います。
サンプルページ

異なるコンポーネント間での移動・並べ替え

これまでは同一コンポーネント無いでの処理でしたが、別々のコンポーネント間ではどうでしょうか。実装してみます。

apA.vue

<template>
  <div>
    <h3>グループA</h3>
    <draggable v-model="itemsA" group="myGroup" @start="drag=true" @end="drag=false" :options="options">
      <div class="item" v-for="item in itemsA" :key="item.id">{{item.name}}</div>
    </draggable>
  </div>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        name: "gpA",

        components: { draggable },

        data () {
            return {
                options: {
                    group: "myGroup",
                    animation: 200
                },
                itemsA: [
                    { id: 1, name: 'name01' },
                    { id: 2, name: 'name02' },
                    { id: 3, name: 'name03' },
                    { id: 4, name: 'name04' },
                    { id: 5, name: 'name05' }
                ]
            }
        }
    }
</script>

apB.vue

<template>
  <div>
    <h3>グループB</h3>
    <draggable v-model="itemsB" group="myGroup" @start="drag=true" @end="drag=false" :options="options">
      <div class="item" v-for="item in itemsB" :key="item.id">{{item.name}}</div>
    </draggable>
  </div>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        name: "gpB",

        components: { draggable },

        data () {
            return {
                options: {
                    group: "myGroup",
                    animation: 200
                },
                itemsB: [
                    { id: 6, name: 'name06' },
                    { id: 7, name: 'name07' },
                    { id: 8, name: 'name08' },
                    { id: 9, name: 'name09' },
                    { id: 10, name: 'name10' }
                ]
            }
        }
    }
</script>

root.vue

<template>
  <div>
    <gp-a></gp-a>
    <gp-b></gp-b>
  </div>
</template>

<script>
  import gpA from './gpA'
  import gpB from './gpB'

  export default {
      name: "root",
      components: { gpA, gpB }
  }
</script>

<style>
  .item {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #ffffff;
  }
  .item:hover {
    cursor: grab;
  }
  .item:active {
    cursor: grabbing;
  }
</style>

rootを定義した以外は、これまでのコードを単純に２つのコンポーネントに分けただけです。実装したら、以下のvueコマンドを叩いて、プレビューしてみてください。

vue serve root.vue --open

問題なく動作する事が確認できると思います。
サンプルページ

イベント

Vue.Draggableでは、以下の動作に対してイベントを発行しています。

filterイベント: フィルタされている要素を選択した時
chooseイベント: 要素が選択された時
startイベント: 動作が始まった時
cloneイベント: 動作が開始され要素のコピーが行われた時
updateイベント: リストの更新が行われた時
addイベント: リストに要素が加えられた時
removeイベント: リストから要素が除去された時
sortイベント: 並び替えが行われた時
endイベント: 動作が終わった時

これらのイベントを起点にして、自由に処理を定義できます。

dnd4.vue

<template>
  <div>
    <div id="status">
      <span v-show="status.moving">移動中</span>
      <span v-show="status.fixed">そのアイテムは操作できません</span>
    </div>
    <div>
      <h3>グループA（{{itemsA.length}}）</h3>
      <draggable
        v-model="itemsA"
        group="myGroup"
        :options="options"

        @choose="onChoose"
        @start="onStart"
        @clone="onClone"
        @add="onAdd"
        @remove="onRemove"
        @update="onUpdate"
        @sort="onSort"
        @filter="onFilter"
        @end="onEnd"
      >
        <div class="item" v-for="item in itemsA" :key="item.id" :class="isFixed(item.fixed)">{{item.name}}</div>
      </draggable>
    </div>
    <div>
      <h3>グループB （{{itemsB.length}}）</h3>
      <draggable
        v-model="itemsB"
        group="myGroup"
        :options="options"

        @choose="onChoose"
        @start="onStart"
        @clone="onClone"
        @add="onAdd"
        @remove="onRemove"
        @update="onUpdate"
        @sort="onSort"
        @filter="onFilter"
        @end="onEnd"
      >
        <div class="item" v-for="item in itemsB" :key="item.id" :class="isFixed(item.fixed)">{{item.name}}</div>
      </draggable>
    </div>
    <div>
      <h3>グループC （{{itemsC.length}}）</h3>
      <draggable
        v-model="itemsC"
        group="myGroup"
        :options="options"

        @choose="onChoose"
        @start="onStart"
        @clone="onClone"
        @add="onAdd"
        @remove="onRemove"
        @update="onUpdate"
        @sort="onSort"
        @filter="onFilter"
        @end="onEnd"
      >
        <div class="item" v-for="item in itemsC" :key="item.id" :class="isFixed(item.fixed)">{{item.name}}</div>
      </draggable>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
      name: "dnd",

      components: { draggable },

      data () {
          return {
              options: {
                  group: "myGroup",
                  animation: 200,
                  filter: '.fixed'
              },
              itemsA: [
                  { id: 1, name: 'name01', fixed: true },
                  { id: 2, name: 'name02', fixed: false },
                  { id: 3, name: 'name03', fixed: false },
                  { id: 4, name: 'name04', fixed: false },
                  { id: 5, name: 'name05', fixed: false }
              ],
              itemsB: [
                  { id: 6, name: 'name06', fixed: true },
                  { id: 7, name: 'name07', fixed: false },
                  { id: 8, name: 'name08', fixed: false },
                  { id: 9, name: 'name09', fixed: false },
                  { id: 10, name: 'name10', fixed: false }
              ],
              itemsC: [
                  { id: 11, name: 'name11', fixed: true },
                  { id: 12, name: 'name12', fixed: false },
                  { id: 13, name: 'name13', fixed: false },
                  { id: 14, name: 'name14', fixed: false },
                  { id: 15, name: 'name15', fixed: false }
              ],
              status: {
                  moving: false,
                  fixed: false,
              }
          }
      },

      computed: {
          isFixed () {
              return (fixed) => {
                  return {
                      'fixed': fixed === true
                  }
              }
          },
      },

      methods: {
          // フィルタされている要素を選択した時（filterイベント）
          onFilter () {
              console.log('onFilter')
              this.status.fixed = true
              setTimeout(() => {
                  this.status.fixed = false
              }, 1000)

          },
          // 選択された時（chooseイベント）
          onChoose (e) {
              console.log('onChoose')
          },
          // 動作が始まった時（startイベント）
          onStart () {
              console.log('onStart')
              this.status.moving = true;
          },
          // 動作が開始され要素のコピーが行われた時（cloneイベント）
          onClone () {
              console.log('onClone')
          },
          // リストの更新が行われた時（updateイベント）
          onUpdate () {
              console.log('onUpdate')
          },
          // リストに要素が加えられた時（addイベント）
          onAdd () {
              console.log('onAdd')
          },
          // リストから要素が除去された時（removeイベント）
          onRemove () {
              console.log('onRemove')
          },
          // 並び替えが行われた時（sortイベント）
          onSort () {
              console.log('onSort')
          },
          // 動作が終わった時（endイベント）
          onEnd (e) {
              console.log('onEnd')
              this.status.moving = false;
          }
      }
  }
</script>

<style scoped>
  #status {
    min-height: 25px;
    border: 1px solid #42b983;
  }
  .item {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 1px solid #7f7f7f;
    border-radius: 10px;
    background-color: #ffffff;
  }
  .item:hover {
    cursor: grab;
  }
  .item:active {
    cursor: grabbing;
  }
  .sortable-chosen {
    background-color: #42b983;
  }
</style>