Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ

Vue.Draggableとは

Vue.Draggableは、Vue.js製のドラッグ＆ドロップコンポートネントライブラリです。

現存するVue.js製のドラッグ＆ドロップライブラリとしては、最大の人気を誇ります。
コンパイルを必要としないUMD用のJSファイルが用意されているので、jQueryからの切り替えも容易に行う事が可能です。
単純にドラッグ＆ドロップの機能が欲しければ、このライブラリを選んでおけば問題無いはずです。

主な使用用途の並び順を変更するのはもちろん、複数のエリアを移動することが可能です。
さらにスマホにも対応しており、タッチイベントによる移動も可能となっています。

【動画サイズ：87KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm i -S vuedraggable 

yarn add vuedraggable

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.23.2/vuedraggable.umd.min.js"></script>

直接「Vue.Draggable」のリポジトリを取得する場合は、以下のURLから取得できます。

https://github.com/SortableJS/Vue.Draggable

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルは、１つのエリアの中で並び順を変更するものになります。

1. ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import draggable from 'vuedraggable' 

CDNで実装する場合

const draggable = window['vuedraggable'];

2.テンプレートを準備

<draggable> の内部がドラッグ可能なエリアになります。
tagプロパティへulやdivのような外部要素タグを設定します。

<draggable> で囲まれた内部にドラッグするリスト要素を設置します。
サンプルでは、v-forを使ってループでリストを設定しています。

<div id="app">
  <draggable tag="ul">
    <li v-for="item, index in items" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
  </draggable>
</div>

3.JavaScriptを設定

１で取得したdraggableを components プロパティに設定します。

今回のサンプルはdateから直接ループに値を渡します。
リスト用の配列データitemsを設定します。

new Vue({
  el: "#app",
  components: {
    'draggable': draggable,
  },
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'}
    ]
  }
});

4. リストにスタイルを適用する

Vue.DraggableにはjQuery uiのような専用のスタイルが無いので、見た目を整えるためにスタイルを自作する必要があります。

今回はサンプル用に下記のようなスタイルを適用します。

ul {
  list-style-type: none;
}
li {
  cursor: pointer;
  padding: 10px;
  border: solid #ddd 1px;
}

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

>>専用ページで確認する

複数エリアの導入手順

次に上の１つのエリア内で並び順を変更するサンプルを参考にして、二つのエリアをドラッグ移動できるサンプルを実装するための導入を行ってみます。
以下の手順にしたがって、実装を行っていきます。

1.テンプレートを準備

ドラッグ移動が可能なエリアを用意する為に、<draggable>を２つ準備します。

２つの<draggable>エリアにoptionsで{group:'ITEMS'}を持たせます。
これで２つ<draggable>エリアを自由に行き来させることができます。

<div id="app">
  <div id="box1" class="box">
    <draggable tag="ul" :options="{group:'ITEMS'}">
      <li v-for="item, index in items" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
    </draggable>
  </div>
  <div id="box2" class="box">
    <draggable tag="ul" :options="{group:'ITEMS'}">
      <li v-for="item, index in items2" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
    </draggable>
  </div>
</div>

2. 複数のdraggableリスト用に配列を用意する

２つのドラッグエリア用のリストをdataに用意します。

new Vue({ 
  el: "#app",
　components: {
   'draggable': draggable,
  },
  data: { 
    items:[ 
      {no:1, name:'キャベツ', categoryNo:'1'}, 
      {no:2, name:'ステーキ', categoryNo:'2'} 
    ], 
    items2:[ 
      {no:5, name:'きゅうり', categoryNo:'1'},
      {no:6, name:'ハンバーグ', categoryNo:'2'} 
    ] 
  }
});
 

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

>>専用ページで確認する

イベント

ドラッグイベントは、任意のタイミングで動作します。
９種類のタイミングが用意されています。

イベント一覧

イベント導入例

今回はendイベントを例に使って解説します。

step.1 onEnd関数を作成する

まずイベントを作成します。
onEndというイベントをmethodsに作成します。
onEndの第一引数を設定しておくと、ドラッグアイテムのイベント情報が格納されます。
これで、ドラッグ後にイベントを反応させられます。

methods: {
  onEnd: function(originalEvent){
    console.log(originalEvent);//originalEventは イベントを取得できる
  }
}

step.2 @end="onEnd"をコンポーネントに設定する

上記で作成したonEndイベントを<draggable>に設定します。

<ul>
 <draggable @end="onEnd">
   <li v-for="item, index in items" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
 </draggable>
</ul>

リストに新規で追加する方法

あらかじめ用意されたリストに新規でドラッグ要素を追加したい場合は、以下が参考になります。

スクリプト

リストの配列にarray.pushを使って、新規のアイテムを追加します。
今回はdoAddというmedhodsを作成して、items配列にpush()でオブジェクトを追加していきます。

 
new Vue({
  el: "#app",
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'}
    ],
    newNo: 4
  },
  computed: {
    myList: function(){
      return this.items;
    }
  },
  methods: {
    doAdd:function(){
      var self = this;
      var no = 0;
      // itemsの中の一番大きなnoを取得して１を足す
      if(self.items.concat().length > 0){
        no =  Math.max.apply(null,self.items.concat().map(function(item){return item.no;})) +1;
        self.newNo = self.newNo < no ? no:self.newNo;
      }
　　　　// itemsにアイテムを追加
      this.items.push(
        {
          no:　this.newNo,
          name:'追加リスト'+ this.newNo,
          categoryNo:'5'
        }
      );
    },
  }
});

HTML

ボタンを用意して、クリックするとdoAddイベントが起動します。

<ul id="app">
 <button v-on:click="doAdd">追加</button>
 <draggable>
   <li v-for="item, index in myList" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
 </draggable>
</ul>

サンプル

>>専用ページで確認する

リストから削除する方法

リストの中からドラッグ要素を削除したい場合は、以下が参考になります。

スクリプト

リストの配列からarray.spliceを使って、アイテムを削除します。
doDeleteというmedhodsを作って、引数で配列のindexを受け取って、splice(index, 1)で削除します。

 
new Vue({
  el: "#app",
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'}
    ]
  },
  computed: {
    myList: function(){
      return this.items;
    }
  },
  methods: {
    doDelete: function(index){
      this.items.splice(index, 1);
    },
  }
});

HTML

削除ボタンをクリックしてdoDeleteイベントを起動します。
引数にindexを持たせます。

<ul id="app">
 <draggable>
   <li v-for="item, index in myList" :key="item.no">
   {{item.name}}-(No.{{item.no}})
   <span class="del" v-on:click="doDelete(index)">[削除]</span>
   </li>
 </draggable>
</ul>

サンプル

>>専用ページで確認する

ドラッグ時の掴める箇所やアニメーションを設定

Vue.Draggableは、Sortable.jsを元にしているので、同ライブラリのオプションを利用することができます。
例えば以下のようなオプションをしようすることができます。

Sortable.jsのオプションを実装してみたい方は、以下の記事が参考になります。

リストの並び順をブラウザに保存する

WEBアプリなどでブラウザに並び順を保存したい時などは、下記の記事が参考になります。

ドラッグリストをフィルタリングする

特定の文字を含むリストを並べ替えたり、カテゴリーで絞り込みをしたい時の参考記事を書きました！↓

テーブルの列を並び替える

テーブルの列の順番を並び替える方法を記事にしました。
下記の記事を参考にしてください。

さいごに

Vue.js製のドラッグ＆ドロップコンポートネントライブラリでした。

管理人が実務で触った感触的には、ドラッグ＆ドロップするならこのライブラリを選んでおけば問題ないと思います。
よっぽど特殊なことをやりたいなら、このライブラリをカスタマイズするよりも別のライブラリを使うのが無難だと思います。

そういう意味では、Vue.js製のドラッグ＆ドロップ系ライブラリは結構種類が豊富です。

今後そういったライブラリをご紹介していければと思います。

おまけ

別のライブラリになってしまいますが、ツリー形式にドラッグ要素を配置できるものもあります。
これを使えばWordpressのメニュー的なのも作れそうですね。

今日はこの辺でー