はじめに

 

システム開発でドラッグ&ドロップを使用したい時、jQueryなら jQuery UIを使えば楽々実装ができます。

対して、Vue.jsならなにを使ったら良いのでしょうか?

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="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//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>
   <li v-for="item, index in items" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
 </draggable>
</ul>

リストのkeyを忘れずに設定しましょう
これが無いと、リストへの要素追加・削除で、バグが多発するので必ず設定しましょう!

[手順2] – Vueにリストを用意する

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のような専用のスタイルが無いので、自作する必要があります。

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

li {
  cursor:pointer;
  padding: 10px;
  border: solid #ddd 1px;
}

デモ

 

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

簡単ですね!

 

複数エリアの導入手順

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

[手順1] – 複数の<draggable>テンプレートを用意する

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

[手順2] – Vueに複数のリストを用意する

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のオプションを使う

 

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

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

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

 

 

今日はこの辺でー

コメントを残す

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