カツオ @SpringBootとVue.jsでWebサービス開発中

起業、転職、サラリーマン生活、Webサービス、アプリ、働き方、プログラミング、Java、JavaScript

vue.js

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

投稿日:

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>

 

-vue.js

執筆者:


comment

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

関連記事

no image

【Vue.js】ファイルアップロード(複数ファイル)の渡し方(axios)

Vue.jsをつかって開発をやっています。画像アップロードを作りたくて、この2日くらい色々調べながら実装をしていました。ようやくそれなりに動くものができましたので、せっかっくなのでブログにも記載させて …

【vue.js】コンポーネント間のメソッドの呼び出し|親から子(ref)、子から親(emit)

Vue.jsで別コンポーネントに定義しているメソッドの呼び出し方についてメモしておきたいと思います。別コンポーネントの呼び出しは大きく2つ存在します。 親から子(ref) 子から親(emit) 最初に …

【Vue.js】サーバーに公開する方法(ビルド手順)

作ったプロジェクトをサーバーに配置する方法です。この手順ですと静的リソースとしてローカルでjavascript、cssをビルドしてくれますので、安いレンタルサーバーとかでも動作します。私も昔から使って …

【vue.js】画像ファイルのアドレスの指定方法について【vuetify】

assets配下に格納している画像ファイルの指定方法についてちょっとつまって調べました。個人的によく忘れちゃうので画像などの静的リソースの指定方法についてメモしておきます。 imgタグの場合 < …