Vue.jsで要素をドラッグして移動する方法

Vue.jsを使用して、要素をドラッグして移動する方法について解説します。Vue.jsでは、ドラッグ&ドロップの操作を行うためのライブラリがいくつか存在しますが、ここでは、その中でも人気のあるvue-draggableを使用します。

目次

1. vue-draggableのインストール
2. vue-draggableの基本的な使い方
3. vue-draggableを用いた要素の移動
4. まとめ

vue-draggableのインストール

まずは、vue-draggableライブラリをプロジェクトに追加します。以下のコマンドを実行してインストールしてください。

npm install vuedraggable

vue-draggableの基本的な使い方

vue-draggableは、Vue.jsにおけるドラッグ&ドロップ操作のためのライブラリです。以下に、基本的な使い方を示します。

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

<script>
import draggable from 'vuedraggable'

export default {
  name: 'App',
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' }
      ]
    }
  }
}
</script>

vue-draggableを用いた要素の移動

vue-draggableを用いて、要素をドラッグして移動する方法を詳しく見ていきましょう。

<template>
  <div id="app">
    <draggable v-model="list">
      <div v-for="(item, index) in list" :key="item.name">
        {{ item.name }}
        <button @click="moveUp(index)">Up</button>
        <button @click="moveDown(index)">Down</button>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'App',
  components: {
    draggable
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        const item = this.list[index]
        this.list.splice(index, 1)
        this.list.splice(index - 1, 0, item)
      }
    },
    moveDown(index) {
      if (index < this.list.length - 1) {
        const item = this.list[index]
        this.list.splice(index, 1)
        this.list.splice(index + 1, 0, item)
      }
    }
  },
  data() {
    return {
      list: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' }
      ]
    }
  }
}
</script>

まとめ

Vue.jsで要素をドラッグして移動する方法について解説しました。vue-draggableライブラリを使用することで、ドラッグ&ドロップ操作を簡単に実装することができます。さまざまなUIを作成する際に、ぜひ活用してみてください。