山崎屋の技術メモ

IT業界で働く中で、気になること、メモしておきたいことを書いていきます。

【Vue.js】ドラッグ&ドロップで並べ替え

表示したリストをドラッグ&ドロップで並べ替える方法をメモしておきます。

ライブラリは SortableJS の vue 版である Vue.Draggable を使います。
GitHub - SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js

日本語情報も豊富で人気のあるライブラリのようです。
Vue.Draggableを使ってサクッとTrelloっぽいものを作る - Qiita
【Vue.js】Vue.jsでドラッグ&ドロップを実装するならVue.Draggableがおすすめ【Vue.Draggable】 - The sky is the limit

リストを表示する

先ずは単純にリストを表示するアプリを作りました。

App.vue です。

<template>
  <div id="app">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "aaa" },
        { id: 2, name: "bbb" },
        { id: 3, name: "ccc" },
        { id: 4, name: "ddd" },
        { id: 5, name: "eee" }
      ]
    };
  }
};
</script>

当然ドラッグできません。
f:id:yyama1556:20190203111503p:plain

ここに Vue.Draggable を適用してドラッグ&ドロップできるようにしていきたいと思います。

Vue.Draggable インストール

npm を使用してインストールする場合の例です。

npm install --save vuedraggable

Vue.Draggable を適用する

App.vue を次のように変えます。

<template>
  <div id="app">
    <draggable v-model="list" element="ul" :options="{animation:300}">
      <li v-for="item in list" :key="item.id">{{ item.id }}:{{ item.name }}</li>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: "aaa" },
        { id: 2, name: "bbb" },
        { id: 3, name: "ccc" },
        { id: 4, name: "ddd" },
        { id: 5, name: "eee" }
      ]
    };
  }
};
</script>

js 部分で vuedraggable をインポートして components に登録しています。

テンプレート部分では ul タグに変えて draggable タグを使用しています。

これでドラッグ&ドロップできるようになりました。
f:id:yyama1556:20190203113800g:plain

ドラッグ&ドロップで並べ替えのまとめ

ライブラリ Vue.Draggable をインストールして draggable タグを使って v-for を囲みます。

オプションは Sortable と同じものが使えるようです。
GitHub - SortableJS/Sortable: Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.

今回はここまで。それでは!

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

  • 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/09/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで