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.8k
Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える
v-kansai meetup #13 の発表資料です。
SAW
January 15, 2020
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
510
EditorConfig を使ってみよう
azuki
1
77
Symfony でサクッと作る REST API サーバー
azuki
1
150
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
180
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
290
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
150
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
360
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
320
Eloquent で relation を扱う基礎
azuki
0
170
Other Decks in Programming
See All in Programming
兎に角、コードレビュー
mitohato14
0
140
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.8k
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
180
コンテキストエンジニアリングで変わるAI活用 リファクタリングワークフローの実践から学んだ形式知
leveragestech
0
100
Understanding Ruby Grammar Through Conflicts
yui_knk
1
120
実践!App Intents対応
yuukiw00w
1
310
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
370
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
230
Langfuseと歩む生成AI活用推進
licux
3
270
AIエージェント開発、DevOps and LLMOps
ymd65536
1
270
Featured
See All Featured
Docker and Python
trallard
45
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Being A Developer After 40
akosma
90
590k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Navigating Team Friction
lara
188
15k
A better future with KSS
kneath
239
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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ͷΑ͏ͳλεΫཧΞϓϦͷ࡞࣮ݱՄೳ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠