【Vue3】vue.draggable.nextの使い方を丁寧に解説

みなさんこんにちは、シロウです。

最近、Vue3でWebアプリを開発しているのですが、VueDraggableを使う機会がありました。

vue3ではvue.draggable.nextというパッケージ名で公開されているのですが、vue2用のVueDraggableといくつか変更点があったみたいです。

そこで、せっかくの機会なので今後使う人のためにも簡単に使い方を解説しておきます。

VueDraggableで出来ること

VueDraggableを利用すれば下記のようにドラッグ&ドロップで並び替える機能なんかは簡単に作成することができます。

デモサイトで公開しているので「こちら」で実際に動かすことも可能です。

【Vue3用】vue.draggable.nextの使い方

それでは早速解説していきます。

ちなみに公式ドキュメントは「こちら」になりますので、詳しく知りたい人はぜひ覗いてみてください。

vue.draggable.nextをインストール

まずはvue.draggable.nextをインストールします。

//yarnの場合
yarn add vuedraggable@next

//npmの場合
npm i -S vuedraggable@next

自身の好きな方でインストールすればOK。

パッケージを読み込む

<template>
  <draggable v-model="myArray" group="people" item-key="id">
    <template #item="{element}">
      <div>{{element.name}}</div>
    </template>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable
    },
}

とりあえずはこれで完成です。

vue.draggable.nextではdraggableタグのv-modelにバインドさせたい配列やオブジェクトがループされるようになっています。

そして、直下のtemplateタグで名前付きスロットのitemを指定してあげると（　#item="{element}"　）elementという名前でループしたプロパティを取得することができます。

そのため、templateタグ内で{{ element }}などのようにすればループされた値を使うことができます。

実際にvue.draggable.nextを使ってみる。

それでは実際に動かしてみましょう。

インストールやパッケージの読み方は先ほどと同じです。

さて、では下記のようにコードを書いてみましょう。

<template>
    <div class="hello">
        <draggable v-model="data" group="people" item-key="id" handle=".handle">
            <template #item="{element}">
                <div class="drag-item">
                    <span class="handle">ここを押せば動かせます。</span>
                    {{ element.id }}
                </div>
            </template>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
    components: {
        draggable,
    },
    data() {
        return {
            data: [
                {
                    id: 1,
                    content: "テスト1",
                },
                {
                    id: 2,
                    content: "テスト2",
                },
                {
                    id: 3,
                    content: "テスト3",
                },
            ],
        };
    },
};
</script>

<style scoped>
.drag-item {
    background: rgb(233, 249, 255);
    margin: 10px 0;
}
</style>

上記のコードで、最初に紹介したデモサイト（gif動画のやつ）のように動くはずです。

今回はデータがないので、dataで定義していますが、一般的にはcreatedフックなどで取得したデータを使うことになると思います。

適宜dataとしている部分を入れ替えてもらえれば普通に動くはずです！

もう少し発展的な使い方

例えば、下記のようなこともできます。

<draggable v-model="data" group="people" item-key="id" handle=".handle"
  @start="drag=true" 
  @end="drag=false" >

このようにdraggableでは「ドラッグし始めたとき@start」や「ドラッグを終えたとき@end」に呼び出されるイベントもあります。

データベースに順番を保存したい場合は@endなどで制御してあげれば良いですね。

他にも:disabled=""などでドラッグを許可するかどうかの挙動を制御できたりもします。

詳しくは公式ドキュメントを見ながら実装してみてください！

それでは今回はこれにて終了です(*´ω｀*)ﾉ

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。