Skip to content

Vue.Draggable → Vue.js

インストール

1、 環境

2、Vue.Draggableをインストール

1
2
3
4
5
# NPM
npm install vuedraggable --save-dev

# Yarn
yarn add vuedraggable

使用方法

1、使用するVueファイルにインポートする

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script>
import draggable from 'vuedraggable'

export default {

  ...

  components: {
    draggable
  },

  ...
}
</script>

2、使用したい箇所をタグで囲む

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>

  ...

  <v-list>
    <draggable v-model="contents">
      <v-list-tile v-for="(content, i) in contents" :key="i">
        something
      </v-list-tile>
    </draggable>
  </v-list>

  ...

</template>

4、 参考サイト