Drag and Drop UI Components vue.js ライブラリ

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

2019年5月16日

Vue.Draggableとは

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

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

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

 

【動画サイズ:87KB】

 

環境

vue.js 2.5.8
Vue.Draggable 2.23.2

インストール

インストールには、npm, yarn, CDNのどれか一つを使用します。

npm

npm i -S vuedraggable 

yarn

yarn add vuedraggable

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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. ライブラリの取り込み

(1)ES6等の場合 [注意]モジュール版は未検証です。

import draggable from 'vuedraggable' 

(2)CDNの場合

const draggable = window['vuedraggable'];

2.テンプレートを準備

<draggable>tagプロパティにulolのような外部要素タグを設定します。
囲まれた内部にドラッグするリスト要素を設置します。

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

[注意]
リストのkeyプロパティを忘れずに設定しましょう!
これが無いと要素の追加・削除で、バグが多発するので必ず設定しましょう!

3.メソッドを設定

1で取得したdraggablecomponents プロパティに設定します。

リスト用の配列をitemsとして設定します。
配列の渡しは、data から直接渡しても良いですし、computed を使っても大丈夫です。

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.テンプレートを準備

ドラッグ要素とエリアを2つ準備します。

<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リスト用に配列を用意する

2つのドラッグ要素用の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'} 
    ] 
  }
});
 

 

デモ

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

 

イベント

ドラッグイベントは以下の種類があります。

イベント一覧

イベント タイミング
start ドラッグ開始時
add 要素追加時
remove 要素削除時
update ドラッグで要素の移動が完了した時
end ドラッグが完了した時
最後に動作します。
choose ドラッグ要素を選択時
sort 並び順を変更した時
updateの後、endの前に動作します。
filter 調査中・・・
clone ドラッグ時に要素のクローンが生成された時

イベント導入例

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

(1) <draggable>に@end="onEnd"を追記する

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

 

(2)methodsでonEnd関数を作成する

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

引数のevtはドラッグアイテムのイベント情報が格納されている。
これで、ドラッグ後にイベントを反応させられます。

 

リストにアイテムを追加する方法

ドラッグ要素を追加したい場合は、以下の記事を参考にしてください。

Vue.Draggable のリストにアイテムを追加する方法

 

リストからアイテムを削除する方法

ドラッグ要素を削除したい場合は、以下の記事を参考にしてください。

Vue.Draggable のリストからアイテムを削除する方法

 

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

以下のカスタマイズをする時には、Sortable.jsのオプションを利用します。

  • ドラッグアイテムの掴める箇所を指定する(ハンドラーを設定)
  • ドラッグアイテムの移動時にアニメーションを設定する
  • ドラッグ可能にするまでに時間を設定する

などです。

 

Vue.DraggableでSortable.jsのオプションを使う

 

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

WEBアプリなどでブラウザに並び順を保存したい時などは、下記の記事を参考にしてください。

「Vue.Draggable」の並び順をブラウザに保存する方法

 

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

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

Vue.Draggableでフィルタリングされたリストを使用する

 

さいごに

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

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

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

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

 

おまけ

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

「vue-draggable-nested-tree」でドラッグ要素をツリー形式で配置する

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

-Drag and Drop, UI Components, vue.js, ライブラリ
-, , , ,