Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える
Search
SAW
January 15, 2020
Programming
3
3.4k
Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える
v-kansai meetup #13 の発表資料です。
SAW
January 15, 2020
Tweet
Share
More Decks by SAW
See All by SAW
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
OSS contributor への第一歩を踏み出すまでの物語
azuki
1
110
Eloquent で relation を扱う基礎
azuki
0
47
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
50
ブラウザでテキストを読み上げる
azuki
0
74
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
41
GraphQL 入門
azuki
1
68
JavaScript で音声認識を試してみよう
azuki
0
80
Voice Recognition in JavaScript
azuki
0
32
Other Decks in Programming
See All in Programming
CSC307 Lecture 08
javiergs
PRO
0
330
CSC307 Lecture 10
javiergs
PRO
0
310
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
【Go言語】golangci-lintの使い方
tomo1227
0
280
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
CSC307 Lecture 09
javiergs
PRO
1
500
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Debugging Ruby Performance
tmm1
71
11k
Navigating Team Friction
lara
181
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
What the flash - Photography Introduction
edds
65
11k
How to Think Like a Performance Engineer
csswizardry
4
590
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Transcript
7VF%SBHHBCMFͰखܰʹϦετΛ υϥοάυϩοϓͰฒͼସ͑Δ WLBOTBJNFFUVQ 4"8
$(whoami) w ࢯ໊Ճ౻फҰ ࡀ ‣ ϋϯυϧωʔϜ4"8 ϗϥʔ͕ۤखͳͷͰөըl4"8zΛݟͨ͜ͱͳ͍ ‣
େࡕࡏॅɾѪग़ ‣ ॴଐגࣜձࣾ.4&/ w 5XJUUFS!B[VLJ@FBUFS Vue.js macOS Linux FreeBSD
ओͳ׆ಈ w ษڧձͷൃදొஃ ‣ WLBOTBJNFFUVQ ‣ 7VF+40TBLB ‣ 0QFO4PVSDF$POGFSFODF ‣
8FCº1)15FDI$BGF w $PEFS%PKPകాϝϯλʔ ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ
WLBOTBJNFFUVQࢀՃྺ w ࢀՃճճ ‣ ొஃճ WLBOTBJNFFUVQηογϣϯൃද WLBOTBJNFFUVQ-5ൃද
WLBOTBJNFFUVQηογϣϯൃද ࠓճ ‣ ௌߨճ WLBOTBJNFFUVQ 7LBOTBJNFFUVQ
ൃද֓ཁ 7VFKTͰ υϥοάυϩοϓʹΑΔϦετͷฒͼସ͑Λ ༰қʹ࣮ݱ͢Δํ๏ͷհ
υϥοάυϩοϓʹΑΔཁૉͷฒͼସ͑ w త7VFKTͰϦετͷཁૉΛυϥοάυϩοϓͰฒͼସ͑ ‣ 5SFMMPͷΑ͏ʹϦετͷཁૉΛҠಈ͍ͨ͠ w )5.-ʹ%SBHBOE%SPQ"1*Λ࣮͑Մೳ ‣ ฒͼସ͑ͱΠϕϯτͷॲཧΛࣗલͰهड़͠ͳ͚ΕͳΒͳ͍
7VF%SBHHBCMFͷ֓ཁ w υϥοάυϩοϓͰཁૉͷฒͼସ͑Λ7VFKT্Ͱ࣮ݱ ‣ όΠϯυ͞ΕͨϦετϦΞΫςΟϒʹฒͼସ͑ ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτͷ༰Λฒͼସ͑ 4PSUBCMFKTͷػೳΛར༻࣮ͯ͠ݱ
7VF%SBHHBCMFͷॴ w ฒͼସ͑ػೳΛ༰қʹ࣮ݱՄೳ ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹཁૉΛࢦఆ͢Δ͚ͩͰΑ͍ ‣ ฒͼସ͑ΠϕϯτॲཧΛهड़͢Δඞཁ͕ͳ͍ w εϚϗλϒϨοτͳͲͷλονεΫϦʔϯͷॲཧڞ௨ ‣
σόΠεʹΑͬͯผʑͷΠϕϯτͰॲཧΛهड़͢Δඞཁ͕ͳ͍
7VF%SBHHBCMFͷಋೖͱ͍ํ w OQNܦ༝ͰΠϯετʔϧ ‣ npm install vuedraggable -D w 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹฒͼସ͑ΔཁૉΛࢦఆ
‣ v-modelσΟϨΫςΟϒͰྻΛࢦఆ <draggable v-model="list"> <div v-for="item in list" :key="item.id"> {{ item.value }} </div> </draggable>
࣮ྫͱڍಈ <template> <draggable v-model="list"> <div v-for="item in list" :key="item.id"> {{
item.value }} </div> </draggable> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable }, data() { return { list: [ { id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'foo' }, { id: 4, value: 'bar' }, ], }; }, } </script>
ϦετΛ·͕ͨͬͨཁૉͷҠಈ w ϦετͷཁૉΛҟͳΔϦετͷཁૉʹҠಈͤ͞Δ͜ͱՄೳ ‣ 7VF%SBHHBCMFͷίϯϙʔωϯτʹgroupϓϩύςΟΛࢦఆ w λεΫཧΞϓϦͰ5P%P͔Β%POFʹҠಈͤ͞ΔΑ͏ͳڍಈΛ࣮ݱ
࣮ྫͱڍಈ <template> <draggable v-model=“list" group=“tasks"> <div v-for="item in todos" :key="item.id">
{{ item.value }} </div> </draggable> <draggable v-model=“dones" group=“tasks"> <div v-for="item in dones” :key="item.id"> {{ item.value }} </div> </draggable> </template> <script> export default { data() { return { todos: [ { id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'foo' }, ], dones: [{ id: 4, value: 'bar' }], }; }, }; </script>
ίϯϙʔωϯτλάͷมߋ w 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτΛแؚ͢ΔλάΛมߋՄೳ ‣ σϑΥϧτͰdivλάͰεϩοτͷཁૉΛแؚ ‣ ϦετͷliཁૉΛulλάͰғΉΑ͏ͳ߹ʹར༻
σϕϩούπʔϧʹΑΔλάͷൺֱ <template> <draggable v-model="list"> <div v-for="item in list" :key="item.id"> {{
item.value }} </div> </draggable> </template> <template> <draggable v-model=“list" tag=“ul”> <li v-for="item in list" :key="item.id"> {{ item.value }} </div> </draggable> </template> λάΛࢦఆ͠ͳ͍߹ liλάΛulλάͰғΉ߹
υϥοάՄೳͳཁૉΛݶఆ w λονσόΠεͰεΫϩʔϧͱυϥοάΠϕϯτ͕ॏͳΔ ‣ ҙਤ͠ͳ͍υϥοάΠϕϯτ͕ൃੜ w υϥοάՄೳͳཁૉΛݶఆͯ͠εΫϩʔϧͱ͔ͿΔ͜ͱΛ͙ ‣ handleϓϩύςΟͰυϥοάՄೳͳཁૉͷηϨΫλΛࢦఆ
4PSUBCMFKTͷΦϓγϣϯػೳ
࣮ྫͱڍಈ <template> <draggable v-model=“list" handle=“.drag”> <div v-for="item in list" :key=“item.id">
<menu-icon class=“drag” /> {{ item.value }} </div> </draggable> </template> <script> export default { data() { return { list: [ { id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'foo' }, { id: 4, value: 'bar' }, ], }; }, } </script>
ΠϕϯτൃՐ࣌ʹॲཧΛՃ w υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕ՃՄೳ ‣ ฒͼସ͑ͷલॲཧޙॲཧΛಠࣗʹ࣮Մೳ ‣ 4PSUBCMFKTͷΠϕϯτΛαϙʔτ w 7VF%SBHHBCMFͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ ‣
moveϓϩύςΟυϥοά࣌ʹཁૉ͕Ҡಈͨ͠ࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @startσΟϨΫςΟϒυϥοά։࢝࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @endσΟϨΫςΟϒυϥοάऴྃ࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @addσΟϨΫςΟϒཁૉ͕ผͷϦετʹυϩοϓ͞ΕͨࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
࣮ࡍͷར༻ྫ w ཱྀߦͷεέδϡʔϧௐΞϓϦ ‣ ϓϥϯͷॱ൪ఔΛυϥοάυϩοϓͰҠಈՄೳ ‣ 6*ίϯϙʔωϯτ7VFUJGZΛར༻ w ϨεϙϯγϒσβΠϯΛ࣮ݱ ‣
ฒͼସ͑ॲཧ1$ͱλονσόΠεͰڞ௨
ಈ࡞ྫ
૯ׅ w 7VF%SBHHBCMFͰυϥοάυϩοϓͷฒͼସ͑Λ༰қʹ࣮Մೳ ‣ ฒͼସ͑Πϕϯτॲཧͷهड़͕ෆཁ w ୯ҰͷϦετ͚ͩͰͳ͘ෳͷϦετΛ·͕ͨͬͨฒͼସ࣮͑ݱՄೳ ‣ 5SFMMPͷΑ͏ͳλεΫཧΞϓϦͷ࡞࣮ݱՄೳ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠