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.5k
Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える
v-kansai meetup #13 の発表資料です。
SAW
January 15, 2020
Tweet
Share
More Decks by SAW
See All by SAW
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
71
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
230
OSS contributor への第一歩を踏み出すまでの物語
azuki
1
160
Eloquent で relation を扱う基礎
azuki
0
82
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
58
ブラウザでテキストを読み上げる
azuki
0
100
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
52
GraphQL 入門
azuki
1
95
JavaScript で音声認識を試してみよう
azuki
0
140
Other Decks in Programming
See All in Programming
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
150
Golang と Erlang
taiyow
7
1.8k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
2.1k
rtcamp 10 (vk-illuminati)
yumcyawiz
1
210
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
430
2024-10-01 dev2next - Observability for Modern JVM Applications
jonatan_ivanov
1
140
文化が生産性を作る
jimpei
3
630
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
860
Memory API: Patterns, Use Cases, and Performance
josepaumard
2
200
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
850
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Side Projects
sachag
452
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Teambox: Starting and Learning
jrom
132
8.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Automating Front-end Workflow
addyosmani
1365
200k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Embracing the Ebb and Flow
colly
84
4.4k
Building Adaptive Systems
keathley
38
2.2k
Designing for Performance
lara
604
68k
4 Signs Your Business is Dying
shpigford
180
21k
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ͷΑ͏ͳλεΫཧΞϓϦͷ࡞࣮ݱՄೳ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠