【Vue.js】Vue.jsでドラッグ&ドロップを実装するならVue.Draggableがおすすめ【Vue.Draggable】

【Vue.js】Vue.Draggableを使って、Vue.jsでドラッグ&ドロップを実装する【Vue.Draggable】

【Vue.js】Vue.Draggableを使って、Vue.jsでドラッグ&ドロップを実装する【Vue.Draggable】

f:id:duo-taro100:20160218004611p:plain

今回は、Vue.jsの実装の中にドラッグ&ドロップの処理を導入します。
色々な方法を試しましたが、Vue.Draggableを使うと実装がとても簡単でしたので、ここではVue.Draggableの導入から使い方までをご紹介したいと思います。

デモ画面
sky-limit-future.sakura.ne.jp

Vue.Draggableとは

github.com

要素のドラッグ&ドロップを簡単にしてくれます。

Vue.Draggableの導入

npmやyarnを使った導入方法と、CDNを使った導入方法があります。

npmやyarnを使った導入方法

$ yarn add vuedraggable

もしくは

$ npm i -S vuedraggable

で導入可能です。

CDNを使った導入方法

公式に書いてある通りで、以下を追記しましょう。

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>

これで導入完了です。

Vue.Draggableの使い方

続いて使い方の解説です。
例えば、下のリストをドラッグ&ドロップで並び替えをしたい場合

<script>
export default {
    data: function(){
        return {
            array : [
                {
                    id: 1,
                    name: "takeshi",
                    gender: "male",
                    phone: "xxxx-yyyy-zzzz",
                    email: "takeshi@skylimit.ne.jp"
                },
                // .... 省略
                {
                    id: 6,
                    name: "akane",
                    gender: "female",
                    phone: "kkkk-aaaa-cccc",
                    email: "akane@skylimit.ne.jp"
                },
            ]
        }
    }
}
</script>

<template>
  <div v-for="(item,index) in array" :key="item.id">
    {{index+1}} : {{item.name}}
  </div>
</template>

とっても簡単です。Vue.Draggableをimportして、ドラッグ&ドロップしたい要素をで囲います。

vuedraggableをimportして、コンポーネントを追加します。

<script>
// vuedraggableのimport
import draggable from 'vuedraggable'

export default {
    // コンポーネント追加
    components: {
      draggable,
    },
    data: function(){
        return {
            array : [
                {
                    id: 1,
                    name: "takeshi",
                    gender: "male",
                    phone: "xxxx-yyyy-zzzz",
                    email: "takeshi@skylimit.ne.jp"
                },
                // .... 省略
                {
                    id: 6,
                    name: "akane",
                    gender: "female",
                    phone: "kkkk-aaaa-cccc",
                    email: "akane@skylimit.ne.jp"
                },
            ]
        }
    }
}
</script>

draggableを追加して、v-modelに「array」(ドラッグしたいリスト)を指定します。

<template>
  <!-- draggableを追加して、v-modelに「array」(ドラッグしたいリスト)を指定 -->
  <draggable v-model="array">
    <div v-for="(item,index) in array" :key="item.id">
      {{index+1}} : {{item.name}}
    </div>
  </draggable>
</template>