くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Vue.js > Vue.DraggableでリストのDrag&Dropできるようにする

Vue.DraggableでリストのDrag&Dropできるようにする

Vue.js Nuxt.js

Nuxt.jsでアプリを作っているときに、リストのドラッグ&ドロップしたいなと思ったときの備忘録。
Vue.Draggableでさくっとできた。

基本的な使い方

1. インストール

$ npm i -S vuedraggable

2. .vueファイルにdraggableコンポーネントを追加

import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    retrun {
      myArray: [
        {id: 1, name: "Alice"},
        {id: 2, name: "Bob"},
        {id: 3, name: "Carol"},
      ]
    }
  }
}

3. templateでdraggableコンポーネントを追加

<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

参考にしたサイト様