【Vue.js】ドラッグアンドドロップの実装方法(vuedraggable)

投稿者: | 2018年11月10日

vue.jsでドラッグアンドドロップの実装ですが、「vuedraggable」を利用することで優れたUIを簡単に実装することができます。

vuedraggableの使い方については以下サイトがとても丁寧に解説されていますので、こちらを参照ください。

Vue.jsでドラッグアンドドロップを実装するなら「Vue.Draggable」がおすすめ

こちらのページではvuedraggableをCDNで利用されていました。私の方ではnpmでインストールして使ってみましたので、その方法だけ紹介させていいただきます。

vuedraggableのインストール

npm install --save vuedraggable

コンポーネントファイルへの組込

  1. <script>タグ内のimportへvuedraggableを追加
  2. <script>タグ内のcomponentsに追加
  3. <template>に<draggable>追加 ※3のタグの設定方法などは上記した別サイトを参照した方がいいです。
<template>
<div class="container">
<ul class="collection with-header">
<draggable :list="posts" class="dragArea">
<li v-for="(post,id) in posts" class="post_item" :key="id">
{{post.content}}
</li>
</draggable>
</ul>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'hogege',
data () {
},
computed: {
},
mounted () {
},
methods: {
},
components: {
draggable
}
}
</script>
<style scoped>
</style>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です