【Vue.js】Vue.Draggableを使って躓いたところ

こんにちは株式会社SCOUTERでフロントエンドエンジニアをしているhirokinishizawaです。

以前機能開発でドラッグアンドドロップを行えるようにするという開発を行いました。そこでVue.Draggableを使用することになったのですが躓いたところがあったのでメモとして残していければと思います。

ドキュメント

インストール

yarn add vuedraggable
又は
npm i -S vuedraggable

構成

実際の機能とは少し違うのですが近い感じの構成で簡単に作成してみました。

<template>
<div class="conteiner">
<div
v-for="(list, key) in lists"
:key="key"
class="lists">
<div class="list-wrapper">
<draggable
:options="{group:'group', animation: 150}"
class="draggable"
@start="draggableStart"
@end="drag=draggableEnd">
<div
v-for="item in list"
:key="item.id"
class="list" >
{{ item.name }}
</div>
</draggable>
</div>
</div>
</div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
components: {
draggable
},
data() {
return {
lists: [
[{ name: 'aaa', id: 1 }, { name: 'bbb', id: 2 }, { name: 'ccc', id: 3 }],
[{ name: 'ddd', id: 4 }, { name: 'eee', id: 5 }, { name: 'fff', id: 6 }],
[{ name: 'ggg', id: 7 }, { name: 'hhh', id: 8 }, { name: 'iii', id: 9 }],
[{ name: 'jjj', id: 10 }, { name: 'kkk', id: 11 }, { name: 'lll', id: 12 }]
]
}
}
methods: {
draggableEnd(event) {
console.log(event)
}
}
}
</script>

躓いたところ

画像のように今回いくつかの列に別れて縦移動のみではなく横移動もできるようにしました。
ドキュメントを読めば縦横のドラッグアンドドロップをできるようにするのはとても簡単に出来るかと思います。今回保存移動後にデータベースに移動先、順番を保存をしなければいけなくサーバーサイドに渡すものとして横移動をした際に`移動前の列,移動先の列`が必要で、この情報をどこからとってくるのかで躓きました。

解決策

Vue.DraggableはSortableというライブラリを拡張したもので、Sortableのイベントを使えます。イベントの種類はこちらに書いてありますがstart, add, remove, update, end, choose, sort, filter, clone があり、今回使用するのはend イベントになります。

イベントの中身をconsoleで吐き出すと以下のようなデータが吐き出され


from(移動前),to(移動先) があるので次に

draggableEnd(event) {
console.log(event.from)
console.log(event.to)
}


としたところhtmlが返ってきました。

先程も言ったように列の情報がほしいのですが、3列目と4列目を区化するものがなく仕方なく、

<draggable 
:options="{group:'group', animation: 150}"
class="draggable"
@start="draggableStart"
@end="drag=draggableEnd"
:data-column-id="key">


data-column-idを持たせることでevent.to.data-column-idで移動先の列と移動前の列の差分を取ることができました。

他にいいやり方が合ったかもしれないですが分からなかったのでわかる方いたら教えていただきたいです!

最後に

エンジニア、デザイナーの採用を行っております!

デザイナー、エンジニアの皆さん興味のある方はご応募お願いします!

フロントエンドエンジニア
最新技術で成長業界の波に乗りたいVue.jsフロントエンドエンジニア募集!
ROXXは「人を想い、社会に問う」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHRTechサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp )  書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施ができ、大手企業からスタートアップベンチャーまで、幅広い企業様にご利用いただくことができます。 ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』  サービス上に掲載されている1,500社以上の求人情報を、自社で抱える求職者へ自由に紹介することができる求人プラットフォームです。人材紹介会社は、自社で無駄な営業コストを抱えず、目の前の転職者支援に注力することができます。今後は、AIを活用した書類の自動作成、求職者に適した求人提案の自動化などのエージェント業務の大幅な効率化を進めていきます。中小規模の人材紹介会社を集約し、数年後には日本最大の人材紹介会社になることを目指します。
株式会社ROXX
UI/UX designer
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
ROXXは「人を想い、社会に問う」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHRTechサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp )  書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施ができ、大手企業からスタートアップベンチャーまで、幅広い企業様にご利用いただくことができます。 ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』  サービス上に掲載されている1,500社以上の求人情報を、自社で抱える求職者へ自由に紹介することができる求人プラットフォームです。人材紹介会社は、自社で無駄な営業コストを抱えず、目の前の転職者支援に注力することができます。今後は、AIを活用した書類の自動作成、求職者に適した求人提案の自動化などのエージェント業務の大幅な効率化を進めていきます。中小規模の人材紹介会社を集約し、数年後には日本最大の人材紹介会社になることを目指します。
株式会社ROXX
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
ROXXは「人を想い、社会に問う」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHRTechサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp )  書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施ができ、大手企業からスタートアップベンチャーまで、幅広い企業様にご利用いただくことができます。 ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』  サービス上に掲載されている1,500社以上の求人情報を、自社で抱える求職者へ自由に紹介することができる求人プラットフォームです。人材紹介会社は、自社で無駄な営業コストを抱えず、目の前の転職者支援に注力することができます。今後は、AIを活用した書類の自動作成、求職者に適した求人提案の自動化などのエージェント業務の大幅な効率化を進めていきます。中小規模の人材紹介会社を集約し、数年後には日本最大の人材紹介会社になることを目指します。
株式会社ROXX
株式会社ROXX's job postings
1 Likes
1 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more