1
/
5

【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年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
UI/UXデザイナー
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
株式会社ROXXでは一緒に働く仲間を募集しています
2 いいね!
2 いいね!
同じタグの記事
今週のランキング
株式会社ROXXからお誘い
この話題に共感したら、メンバーと話してみませんか?