【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フロントエンドエンジニア募集!
SCOUTERは「人を想い、社会に問う」というビジョンを掲げ、3つのHRTech事業を提供しているインターネット企業です。 2016年にリリースした「SCOUTER」の事業アセットをもとに、2018年より「SARDINE」をリリースしました。 また、求人企業の選考課題を解決するため2019年「back check」をβ版でリリースしました。 『SCOUTER』 審査を通過したユーザー(=スカウター)が友人知人を企業に紹介することで、報酬を受け取ることができる次世代のキャリア支援サービスです。 スカウターは転職者の良き理解者となり、納得のいくキャリアの選択を一緒に実現することを目指します。 スカウター数は3,000名を突破し、1,000社以上の求人情報から転職者の紹介先を選択することが出来ます。 コンセプトムービー https://www.youtube.com/watch?v=VzrFxKt0eFk 『SARDINE』 SARDINEは人材紹介会社向けの月額制のクラウド求人データベースです。 サービス上に掲載されている1,000社以上の求人に対して、自社で抱える転職者を掲載企業に紹介することが可能であり、 成約時の紹介料を100%受け取ることができるクラウドサービスです。 豊富な求人を用いて、集客力と決定率を最短で向上でき、報酬を全額受け取ることのできるエージェント支援サービスです。 メディア掲載事例 「副業ヘッドハンティングのSCOUTERが人材紹介会社向けサービス「SARDINE」を提供開始」 https://jp.techcrunch.com/2018/05/29/scouter-released-sardine/ 『back check』 「back check」は、書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施できることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業様にご利用いただけます。 https://backcheck.jp
株式会社SCOUTER
UI/UX designer
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
SCOUTERは「人を想い、社会に問う」というビジョンを掲げ、3つのHRTech事業を提供しているインターネット企業です。 2016年にリリースした「SCOUTER」の事業アセットをもとに、2018年より「SARDINE」をリリースしました。 また、求人企業の選考課題を解決するため2019年「back check」をβ版でリリースしました。 『SCOUTER』 審査を通過したユーザー(=スカウター)が友人知人を企業に紹介することで、報酬を受け取ることができる次世代のキャリア支援サービスです。 スカウターは転職者の良き理解者となり、納得のいくキャリアの選択を一緒に実現することを目指します。 スカウター数は3,000名を突破し、1,000社以上の求人情報から転職者の紹介先を選択することが出来ます。 コンセプトムービー https://www.youtube.com/watch?v=VzrFxKt0eFk 『SARDINE』 SARDINEは人材紹介会社向けの月額制のクラウド求人データベースです。 サービス上に掲載されている1,000社以上の求人に対して、自社で抱える転職者を掲載企業に紹介することが可能であり、 成約時の紹介料を100%受け取ることができるクラウドサービスです。 豊富な求人を用いて、集客力と決定率を最短で向上でき、報酬を全額受け取ることのできるエージェント支援サービスです。 メディア掲載事例 「副業ヘッドハンティングのSCOUTERが人材紹介会社向けサービス「SARDINE」を提供開始」 https://jp.techcrunch.com/2018/05/29/scouter-released-sardine/ 『back check』 「back check」は、書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施できることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業様にご利用いただけます。 https://backcheck.jp
株式会社SCOUTER
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
SCOUTERは「人を想い、社会に問う」というビジョンを掲げ、3つのHRTech事業を提供しているインターネット企業です。 2016年にリリースした「SCOUTER」の事業アセットをもとに、2018年より「SARDINE」をリリースしました。 また、求人企業の選考課題を解決するため2019年「back check」をβ版でリリースしました。 『SCOUTER』 審査を通過したユーザー(=スカウター)が友人知人を企業に紹介することで、報酬を受け取ることができる次世代のキャリア支援サービスです。 スカウターは転職者の良き理解者となり、納得のいくキャリアの選択を一緒に実現することを目指します。 スカウター数は3,000名を突破し、1,000社以上の求人情報から転職者の紹介先を選択することが出来ます。 コンセプトムービー https://www.youtube.com/watch?v=VzrFxKt0eFk 『SARDINE』 SARDINEは人材紹介会社向けの月額制のクラウド求人データベースです。 サービス上に掲載されている1,000社以上の求人に対して、自社で抱える転職者を掲載企業に紹介することが可能であり、 成約時の紹介料を100%受け取ることができるクラウドサービスです。 豊富な求人を用いて、集客力と決定率を最短で向上でき、報酬を全額受け取ることのできるエージェント支援サービスです。 メディア掲載事例 「副業ヘッドハンティングのSCOUTERが人材紹介会社向けサービス「SARDINE」を提供開始」 https://jp.techcrunch.com/2018/05/29/scouter-released-sardine/ 『back check』 「back check」は、書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、リファレンスチェックサービスです。業界水準の1/10ほどの低コストで実施できることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業様にご利用いただけます。 https://backcheck.jp
株式会社SCOUTER
株式会社SCOUTER's job postings
Anonymous
Bb291fa4 0ab8 472f b8da f54bf3b7be7d?1542365396
1 Likes
Anonymous
Bb291fa4 0ab8 472f b8da f54bf3b7be7d?1542365396
1 Likes

Weekly ranking

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

Page top icon