ダッシュで奪取

自分用のメモ

【Vue.js】Vue.Draggableでドラッグ&ドロップ

ドラッグ&ドロップが実装できるライブラリを使ってみたので、メモです。

SortableJS/Vue.Draggable

この記事の目標
  • 項目ドラッグで、リストの入れ替えができるところまで

https://i.gyazo.com/459baebd0ba60e8529aee4966b28b683.gif

目次

  1. 導入
  2. 全体
  3. 参考URL
環境
  • Vue.js 2.6.11

  • Vue.Draggable 2.23.2

1. 導入

今回は yarn を使っているので、yarnでインストール

$ yarn add vuedraggable

npm だったら…

$ npm install -g vuedraggable

2. 全体

<template>
  <div class="draggable">
    <h6 class="font-weight-bold">ポケモン</h6>
    <draggable
      element="ul"
      class="list-group col-4"
      :list="pokemons">
      <li class="list-group-item"
        v-for="pokemon in pokemons"
        :key="pokemon.no">
        {{ pokemon.name }}
      </li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      pokemons: [
        { no: '001', name: 'フシギダネ' },
        { no: '004', name: 'ヒトカゲ' },
        { no: '007', name: 'ゼニガメ' },
        { no: '025', name: 'ピカチュウ' }
      ]
    }
  }
}
</script>

<style scoped>
li {
  cursor: pointer;
}
</style>
17行目〜
  • ライブラリを読み込んで、draggableコンポーネントとして使えるようにする
// 17:
<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
4行目〜
  • draggableのタグで囲んだ部分が、ドラッグで動かせるようになる

  • この例だと、li要素の部分

// 4:
<draggable
  element="ul"
  class="list-group col-4"
  :list="pokemons">
  <li class="list-group-item"
    v-for="pokemon in pokemons"
    :key="pokemon.no">
    {{ pokemon.name }}
  </li>
</draggable>
4行目〜
  • element="ul" 指定しないと<draggable>〜</draggable>がdiv要素になる

  • ↑ ul要素にしたいので、入れています

  • :list="なんとか" この記述が無くても動作はする

  • ↑ ドラッグで項目移動させた状態を配列に反映させたいので、入れています

// 4:
<draggable
  element="ul"
  class="list-group col-4"
  :list="pokemons">

3. 参考URL