忘れないように記録しとこ

Vue.jsでドラッグアンドドロップを実装するなら「Vue.Draggable」がおすすめ

環境

vue.js : 2.5.8
Vue.Draggable: 2.16.0

 

はじめに

ドラッグアンドドロップを使用したい時、jQueryなら jQuery UIで楽々実装ができます。

対して、Vue.jsならどうしたら良いのでしょうか?

 

Vue.jsなら、「Vue.Draggable」がおすすめです!

 

 

 

デモ

本家デモ

https://jsfiddle.net/dede89/sqssmhtz/

 


単一エリア間を移動

 

See the Pen Vue drag test sample by カバの樹 (@kabanoki) on CodePen.0

 

設定方法はこちら

 


複数エリア間を移動

 

See the Pen Vue.Draggable multiple by カバの樹 (@kabanoki) on CodePen.0

 

設定方法はこちら

 

 

ダウンロード

「Vue.Draggable」は以下のURLから取得できます。

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

 

以下の設定解説のようにダウンロードせずに、CDNを利用するのも有りがだと思います。

 

基本設定

私は、HTMLにゴリっと書いてしまうタイプなので、それでも良い人向けの解説です。

以下サンプルの実装例です。

 


CDNの設定

 

以下のCDNを読み込みます。

<!-- vue.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<!-- sortable.js -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js></script>

<!-- vue.draggable -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

 


HTMLの設定

 

次に、ドラッグしたいリスト<draggable>で囲みます。

draggablev-modelには、上記と同じドラッグしたいリストを設定します。

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

 

リストのkeyを忘れずに設定しましょう

 

「Vue.Draggable」のサンプルを紹介しているサイトが多数ありますが、keyが設定されてない場合が多いです・・・。

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

 


■Vueの設定

 

vueは、こんな感じでOK

new Vue({
  el: "#main",
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'},
      {no:4, name:'冷蔵庫', categoryNo:'4'},
      {no:5, name:'きゅうり', categoryNo:'1'},
      {no:6, name:'ハンバーグ', categoryNo:'2'},
      {no:7, name:'バナナ', categoryNo:'3'},
      {no:8, name:'PS4', categoryNo:'4'}
    ]
  },
  computed: {
    myList: {
      get() {
         return this.items;
      },
      set(value) {
         this.items = value;
      }
    }
  }
});

 

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

簡単ですね!

 

複数のエリアをドラッグで移動できるようにする

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

 


Vueの設定

 

new Vue({
  el: "#main",
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'},
      {no:4, name:'冷蔵庫', categoryNo:'4'}
    ],
    items2:[
      {no:5, name:'きゅうり', categoryNo:'1'},
      {no:6, name:'ハンバーグ', categoryNo:'2'},
      {no:7, name:'バナナ', categoryNo:'3'},
      {no:8, name:'PS4', categoryNo:'4'}
    ]
  },
  computed: {
    myList: {
      get() {
        return this.items;
      },
      set(value) {
        this.items = value;
      }
    }
   myList2: {
      get() {
        return this.items2;
      },
      set(value) {
        this.items2 = value;
      }
   }
  }
});

 


HTMLの設定

 

draggableに optionsgroupを設定する。

下記の例はgroupITEMSを設定している。

<div id="main">
  <div id="box1">
    <ul>
    <draggable v-modal="myList" :options="{group:'ITEMS'}">
      <li v-for="item, index in myList" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
    </draggable>
    </ul>
  </div>
  <div id="box2">
    <ul>
    <draggable v-modal="myList2" :options="{group:'ITEMS'}">
      <li v-for="item, index in myList2" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
    </draggable>
    </ul>
  </div>
</div>

 

ドラッグイベント

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

  • start
  • add
  • remove
  • update
  • end
  • choose
  • sort
  • filter
  • clone

 


イベント例

 

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

 

<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>

 

 

次に、methodonEnd関数を作成します。

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

 

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

 

moveイベントだけは注意!

ドラッグ中を取得するmoveだけは要注意!
書き方が微妙に違います。

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

 

checkMove: function(evt, originalEvent){
 // evt はドラッグ中のアイテムのイベント情報を取得できる
 // evt.draggedContextの中にドラッグ前のドラッグアイテムの情報が格納されている
 // evt.relatedContextの中にドラッグ後のドラッグアイテムの情報が格納されている
 // originalEventはドラッグ後のアイテムのイベント情報を取得できる
}
  • 引数のevtはドラッグアイテムのイベント情報が格納されている。
  • 引数のevt.draggedContextはドラッグ前のドラッグアイテムの情報が格納されている
  • 引数のevt.relatedContextはドラッグ後のドラッグアイテムの情報が格納されている
  • 引数のoriginalEventはドラッグ後のアイテムのイベント情報を格納されている。

 

moveイベントでドラッグしたくないアイテムをフィルターする

特定のアイテムだけドラッグしたくない場合は、moveイベントに以下のフィルターを設定する。

checkMove: function(evt, aft){
  // リンゴだったらドラッグできない
  return (evt.draggedContext.element.name!=='リンゴ');
}

 

 

Vue.Draggableのベース、Sortable.jsを利用してカスタマイズ

 

「Vue.Draggable」は、「Sortable.js」をベースに作られています。

それ故に、「Sortable.js」の機能を完全にサポートしています。
https://github.com/RubaXa/Sortable#options

 

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

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

などです。

 

参考記事を書きました!↓

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

 

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

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

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

 

 

いかがでしょうか?

今日はこの辺でー

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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