Vue.Draggableとは

Vue.Draggable」は、Vue.js製のドラッグ&ドロップコンポートネントライブラリです。
jQuery UIdraggableSortableのように、要素ドラッグ&ドロップで移動させることができます。

 

Vue.Draggable」は複数のエリアを移動することも可能です。
さらにスマホ対応タッチイベントによる移動も可能となっています。

 

現状(2019/07/01)で、Githubのスターが8000を超える大人気ライブラリーです。

 

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

 

環境

vue.js : 2.5.8
Vue.Draggable: 2.20.0

 

インストール

インストールには、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.20.0/vuedraggable.umd.min.js"></script>

 

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

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

 

導入手順

1. <draggable>テンプレートを用意する

<draggable>リスト要素を挟みます。

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

[注意]リストのkeyを忘れずに設定しましょう!

これが無いと、要素の追加・削除で、バグが多発するので必ず設定しましょう!

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

リスト用の配列を設定します。
配列の渡しは、dataで渡しても良いですし、computedでも大丈夫です。

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

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

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

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

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

デモ

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

 

基本設定は、これだけです。

簡単ですね!

 

複数エリアの導入手順

二つのエリアをドラッグで移動できるようにする。

1. 複数の<draggable>テンプレートを用意する

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

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

new Vue({ 
  el: "#app",
  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製のドラッグ&ドロップコンポートネントライブラリでした。

ドラッグ&ドロップするならこのライブラリを選んでおけば問題ないと思います。

 

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

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

 

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください