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.2k
Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える
v-kansai meetup #13 の発表資料です。
SAW
January 15, 2020
Tweet
Share
More Decks by SAW
See All by SAW
JavaScript で音声認識を試してみよう
azuki
0
23
Voice Recognition in JavaScript
azuki
0
12
Nuxt で GraphQL のクエリを送信する方法
azuki
2
70
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
57
Postman で GraphQL のクエリを送ってみよう
azuki
0
200
Laravel でモデルの ID を UUID/ULID にする方法
azuki
0
110
Vue ユーザーが Svelte に⼊⾨してみた
azuki
1
270
Vite でお手軽 Vue.js の環境構築
azuki
2
430
Vue.js と Chart.js でチャートを描画する
azuki
0
6.3k
Other Decks in Programming
See All in Programming
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.9k
Understanding Ast By Looking
inouehi
0
120
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Introduction for Open Source Swift Workshop
giginet
PRO
0
270
Laravel標準バリデーションでできること
hmb_ok
2
360
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
object-oriented-conference-2024
fuwasegu
6
1.9k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Building an army of robots
kneath
300
41k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Adopting Sorbet at Scale
ufuk
66
8.5k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
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ͷΑ͏ͳλεΫཧΞϓϦͷ࡞࣮ݱՄೳ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠