Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える

v-kansai meetup #13 の発表資料です。

Transcript

1. 7VF%SBHHBCMF
   ͰखܰʹϦετΛ
   υϥοάυϩοϓͰฒͼସ͑Δ WLBOTBJ
   NFFUVQ
   
   
   4"8
2. $(whoami) w ࢯ໊
   Ճ౻
   फҰ࿠
   ࡀ
   ‣ ϋϯυϧωʔϜ
   4"8
    ϗϥʔ͕ۤखͳͷͰөը
   l4"8z
   Λݟͨ͜ͱ͸ͳ͍
   ‣ େࡕࡏॅɾѪ஌ग़਎
   ‣ ॴଐ
   גࣜձࣾ.4&/
   ೥໨
   w 5XJUUFS
   !B[VLJ@FBUFS Vue.js macOS Linux FreeBSD
3. ओͳ׆ಈ w ษڧձͷൃදొஃ
   ‣ WLBOTBJ
   NFFUVQ
   ‣ 7VF+4
   0TBLB
   ‣ 0QFO
   4PVSDF
   $POGFSFODF
   ‣ 8FCº1)1
   5FDI
   $BGF
   w $PEFS%PKP
   കా
   ϝϯλʔ
   ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ
4. WLBOTBJ
   NFFUVQ
   ࢀՃྺ w ࢀՃճ਺
   ճ
   ‣ ొஃ
   ճ
    WLBOTBJ
   NFFUVQ
   
   ηογϣϯൃද
    WLBOTBJ
   NFFUVQ
   
   -5
   ൃද
    WLBOTBJ
   NFFUVQ
   
   ηογϣϯൃද
   ࠓճ
   ‣ ௌߨ
   ճ
    WLBOTBJ
   NFFUVQ
   
    7LBOTBJ
   NFFUVQ
   
5. ൃද֓ཁ 7VFKT
   Ͱ
   υϥοάυϩοϓʹΑΔϦετͷฒͼସ͑Λ
   ༰қʹ࣮ݱ͢Δํ๏ͷ঺հ
6. υϥοάυϩοϓʹΑΔཁૉͷฒͼସ͑ w ໨త
   7VFKT
   ͰϦετͷཁૉΛυϥοάυϩοϓͰฒͼସ͑
   ‣ 5SFMMP
   ͷΑ͏ʹϦετͷཁૉΛҠಈ͍ͨ͠
   w )5.-
   ʹ
   %SBH
   BOE
   %SPQ
   "1*
   Λ࢖͑͹࣮૷Մೳ
   ‣ ฒͼସ͑ͱΠϕϯτͷॲཧΛࣗલͰهड़͠ͳ͚Ε͹ͳΒͳ͍
7. 7VF%SBHHBCMF
   ͷ֓ཁ w υϥοάυϩοϓͰཁૉͷฒͼସ͑Λ
   7VFKT
   ্Ͱ࣮ݱ
   ‣ όΠϯυ͞ΕͨϦετ΋ϦΞΫςΟϒʹฒͼସ͑
   ‣ 7VF%SBHHBCMF
   ίϯϙʔωϯτͷεϩοτͷ಺༰Λฒͼସ͑
    4PSUBCMFKT
   ͷػೳΛར༻࣮ͯ͠ݱ
8. 7VF%SBHHBCMF
   ͷ௕ॴ w ฒͼସ͑ػೳΛ༰қʹ࣮ݱՄೳ
   ‣ 7VF%SBHHBCMF
   ίϯϙʔωϯτͷεϩοτʹཁૉΛࢦఆ͢Δ͚ͩͰΑ͍
   ‣ ฒͼସ͑΍ΠϕϯτॲཧΛهड़͢Δඞཁ͕ͳ͍
   w εϚϗ΍λϒϨοτͳͲͷλονεΫϦʔϯͷॲཧ΋ڞ௨
   ‣ σόΠεʹΑͬͯผʑͷΠϕϯτͰॲཧΛهड़͢Δඞཁ͕ͳ͍
9. 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>
10. ࣮૷ྫͱڍಈ <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>
11. ϦετΛ·͕ͨͬͨཁૉͷҠಈ w ϦετͷཁૉΛҟͳΔϦετͷཁૉʹҠಈͤ͞Δ͜ͱ΋Մೳ
    ‣ 7VF%SBHHBCMF
    ͷίϯϙʔωϯτʹ
    group
    ϓϩύςΟΛࢦఆ
    w λεΫ؅ཧΞϓϦͰ
    5P
    %P
    ͔Β
    %POF
    ʹҠಈͤ͞ΔΑ͏ͳڍಈΛ࣮ݱ
12. ࣮૷ྫͱڍಈ <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>
13. ίϯϙʔωϯτλάͷมߋ w 7VF%SBHHBCMF
    ίϯϙʔωϯτͷεϩοτΛแؚ͢ΔλάΛมߋՄೳ
    ‣ σϑΥϧτͰ͸
    div
    λάͰεϩοτͷཁૉΛแؚ
    ‣ Ϧετͷ
    li
    ཁૉΛ
    ul
    λάͰғΉΑ͏ͳ৔߹ʹར༻
14. σϕϩούπʔϧʹΑΔλάͷൺֱ <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
    λάͰғΉ৔߹
15. υϥοάՄೳͳཁૉΛݶఆ w λονσόΠεͰ͸εΫϩʔϧͱυϥοάΠϕϯτ͕ॏͳΔ
    ‣ ҙਤ͠ͳ͍υϥοάΠϕϯτ͕ൃੜ
    w υϥοάՄೳͳཁૉΛݶఆͯ͠εΫϩʔϧͱ͔ͿΔ͜ͱΛ๷͙
    ‣ handle
    ϓϩύςΟͰυϥοάՄೳͳཁૉͷηϨΫλΛࢦఆ
     4PSUBCMFKT
    ͷΦϓγϣϯػೳ
16. ࣮૷ྫͱڍಈ <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>
17. ΠϕϯτൃՐ࣌ʹॲཧΛ௥Ճ w υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕௥ՃՄೳ
    ‣ ฒͼସ͑ͷલॲཧ΍ޙॲཧΛಠࣗʹ࣮૷Մೳ
    ‣ 4PSUBCMFKT
    ͷΠϕϯτΛαϙʔτ
    w 7VF%SBHHBCMF
    ͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ
    ‣ move
    ϓϩύςΟ
    υϥοά࣌ʹཁૉ͕Ҡಈͨ͠ࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
    ‣ @start
    σΟϨΫςΟϒ
    υϥοά։࢝࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
    ‣ @end
    σΟϨΫςΟϒ
    υϥοάऴྃ࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
    ‣ @add
    σΟϨΫςΟϒ
    ཁૉ͕ผͷϦετʹυϩοϓ͞ΕͨࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
18. ࣮ࡍͷར༻ྫ w ཱྀߦͷεέδϡʔϧௐ੔ΞϓϦ
    ‣ ϓϥϯͷॱ൪΍೔ఔΛυϥοάυϩοϓͰҠಈՄೳ
    ‣ 6*
    ίϯϙʔωϯτ͸
    7VFUJGZ
    Λར༻
    w ϨεϙϯγϒσβΠϯΛ࣮ݱ
    ‣ ฒͼସ͑ॲཧ͸
    1$
    ͱλονσόΠεͰڞ௨
19. ಈ࡞ྫ
20. ૯ׅ w 7VF%SBHHBCMF
    Ͱυϥοάυϩοϓͷฒͼସ͑Λ༰қʹ࣮૷Մೳ
    ‣ ฒͼସ͑΍Πϕϯτॲཧͷهड़͕ෆཁ
    w ୯ҰͷϦετ͚ͩͰͳ͘ෳ਺ͷϦετΛ·͕ͨͬͨฒͼସ͑΋࣮ݱՄೳ
    ‣ 5SFMMP
    ͷΑ͏ͳλεΫ؅ཧΞϓϦͷ࡞੒΋࣮ݱՄೳ
21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠