Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《HTML要素のドラッグアンドドロップ》

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回は、Nuxt.jsからライブラリを読み込むだけで簡単にHTML要素のドラッグアンドドロップが実現できる、Vue.Draggableについてご紹介します。

使用するライブラリ

今回は下記ライブラリを使用して説明をしていきます。

Vue.js: 2.6.11
Nuxt.js: 2.12.2
vuedraggable: 2.24.0

Vue.Draggableの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm i -S vuedraggable

これで対象のプロジェクトに、ライブラリを追加することができました。詳しい内容については、公式ページよりご確認ください。

次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>vuedraggableプラグインサンプル</h1>
    </div>
    <div style="margin-top: 20px;">
      <div style="width: 50%; margin-left: 25%;">
        <draggable v-model="arrayList">
          <div
            v-for="elem in arrayList"
            :key="elem.id"
            style="
              background-color: aliceblue;
              padding: 20px;
              margin-bottom: 15px;
            "
          >
            {{ elem.param }}
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      arrayList: [
        { id: 1, param: 'Test List1' },
        { id: 2, param: 'Test List2' },
        { id: 3, param: 'Test List3' },
      ],
    }
  },
}
</script>
<style>
.samaple__conntents {
  margin: 0 auto;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>

８行目、２０行目：
「draggable」のプラグインの使用を宣言しています。draggableタグの間に記載される要素が、ドラッグアンドドロップ可能な要素となります。

９行目～１９行目：
Vueの「v-for」を使用して、DIV要素を繰り返し表示し、「 {{ elem.param }}」で要素の文字列を表示しています。
※ 通常のVueの操作の為、詳しい説明を省きます。

２６行目、２９行目：
「draggable」モジュールの使用宣言をこないます。

３２行目～３６行目：
表示する値を宣言しています。