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

Be33a704f251c77162896ac5ba03e9ac?s=47 SAW
January 15, 2020
Programming
2
830

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

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

Be33a704f251c77162896ac5ba03e9ac?s=128

SAW

January 15, 2020
Tweet

Want more?

Be33a704f251c77162896ac5ba03e9ac?s=48 azuki
2
290
Be33a704f251c77162896ac5ba03e9ac?s=48 azuki
0
330
Be33a704f251c77162896ac5ba03e9ac?s=48 azuki
1
210
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
13
790
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
4
430
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
270
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
560
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
310
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
350
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
820
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
210
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
290

Transcript

  1. 1.

    7VF%SBHHBCMFͰखܰʹϦετΛ υϥοάυϩοϓͰฒͼସ͑Δ WLBOTBJNFFUVQ  4"8

  2. 2.

    $(whoami) w ࢯ໊Ճ౻फҰ࿠ ࡀ  ‣ ϋϯυϧωʔϜ4"8  ϗϥʔ͕ۤखͳͷͰөըl4"8zΛݟͨ͜ͱ͸ͳ͍ ‣

    େࡕࡏॅɾѪ஌ग़਎ ‣ ॴଐגࣜձࣾ.4&/ ೥໨  w 5XJUUFS!B[VLJ@FBUFS Vue.js macOS Linux FreeBSD
  3. 3.

    ओͳ׆ಈ w ษڧձͷൃදొஃ ‣ WLBOTBJNFFUVQ ‣ 7VF+40TBLB ‣ 0QFO4PVSDF$POGFSFODF ‣

    8FCº1)15FDI$BGF w $PEFS%PKPകాϝϯλʔ ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ
  4. 4.

    WLBOTBJNFFUVQࢀՃྺ w ࢀՃճ਺ճ ‣ ొஃճ  WLBOTBJNFFUVQηογϣϯൃද  WLBOTBJNFFUVQ-5ൃද 

    WLBOTBJNFFUVQηογϣϯൃද ࠓճ  ‣ ௌߨճ  WLBOTBJNFFUVQ  7LBOTBJNFFUVQ
  5. 5.

    ൃද֓ཁ 7VFKTͰ υϥοάυϩοϓʹΑΔϦετͷฒͼସ͑Λ ༰қʹ࣮ݱ͢Δํ๏ͷ঺հ

  6. 6.

    υϥοάυϩοϓʹΑΔཁૉͷฒͼସ͑ w ໨త7VFKTͰϦετͷཁૉΛυϥοάυϩοϓͰฒͼସ͑ ‣ 5SFMMPͷΑ͏ʹϦετͷཁૉΛҠಈ͍ͨ͠ w )5.-ʹ%SBHBOE%SPQ"1*Λ࢖͑͹࣮૷Մೳ ‣ ฒͼସ͑ͱΠϕϯτͷॲཧΛࣗલͰهड़͠ͳ͚Ε͹ͳΒͳ͍

  7. 7.

    7VF%SBHHBCMFͷ֓ཁ w υϥοάυϩοϓͰཁૉͷฒͼସ͑Λ7VFKT্Ͱ࣮ݱ ‣ όΠϯυ͞ΕͨϦετ΋ϦΞΫςΟϒʹฒͼସ͑ ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτͷ಺༰Λฒͼସ͑  4PSUBCMFKTͷػೳΛར༻࣮ͯ͠ݱ

  8. 8.

    7VF%SBHHBCMFͷ௕ॴ w ฒͼସ͑ػೳΛ༰қʹ࣮ݱՄೳ ‣ 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹཁૉΛࢦఆ͢Δ͚ͩͰΑ͍ ‣ ฒͼସ͑΍ΠϕϯτॲཧΛهड़͢Δඞཁ͕ͳ͍ w εϚϗ΍λϒϨοτͳͲͷλονεΫϦʔϯͷॲཧ΋ڞ௨ ‣

    σόΠεʹΑͬͯผʑͷΠϕϯτͰॲཧΛهड़͢Δඞཁ͕ͳ͍
  9. 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. 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. 11.

    ϦετΛ·͕ͨͬͨཁૉͷҠಈ w ϦετͷཁૉΛҟͳΔϦετͷཁૉʹҠಈͤ͞Δ͜ͱ΋Մೳ ‣ 7VF%SBHHBCMFͷίϯϙʔωϯτʹgroupϓϩύςΟΛࢦఆ w λεΫ؅ཧΞϓϦͰ5P%P͔Β%POFʹҠಈͤ͞ΔΑ͏ͳڍಈΛ࣮ݱ

  12. 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. 13.

    ίϯϙʔωϯτλάͷมߋ w 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτΛแؚ͢ΔλάΛมߋՄೳ ‣ σϑΥϧτͰ͸divλάͰεϩοτͷཁૉΛแؚ ‣ ϦετͷliཁૉΛulλάͰғΉΑ͏ͳ৔߹ʹར༻

  14. 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. 15.

    υϥοάՄೳͳཁૉΛݶఆ w λονσόΠεͰ͸εΫϩʔϧͱυϥοάΠϕϯτ͕ॏͳΔ ‣ ҙਤ͠ͳ͍υϥοάΠϕϯτ͕ൃੜ w υϥοάՄೳͳཁૉΛݶఆͯ͠εΫϩʔϧͱ͔ͿΔ͜ͱΛ๷͙ ‣ handleϓϩύςΟͰυϥοάՄೳͳཁૉͷηϨΫλΛࢦఆ 

    4PSUBCMFKTͷΦϓγϣϯػೳ
  16. 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. 17.

    ΠϕϯτൃՐ࣌ʹॲཧΛ௥Ճ w υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕௥ՃՄೳ ‣ ฒͼସ͑ͷલॲཧ΍ޙॲཧΛಠࣗʹ࣮૷Մೳ ‣ 4PSUBCMFKTͷΠϕϯτΛαϙʔτ w 7VF%SBHHBCMFͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ ‣

    moveϓϩύςΟυϥοά࣌ʹཁૉ͕Ҡಈͨ͠ࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @startσΟϨΫςΟϒυϥοά։࢝࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @endσΟϨΫςΟϒυϥοάऴྃ࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ ‣ @addσΟϨΫςΟϒཁૉ͕ผͷϦετʹυϩοϓ͞ΕͨࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
  18. 18.

    ࣮ࡍͷར༻ྫ w ཱྀߦͷεέδϡʔϧௐ੔ΞϓϦ ‣ ϓϥϯͷॱ൪΍೔ఔΛυϥοάυϩοϓͰҠಈՄೳ ‣ 6*ίϯϙʔωϯτ͸7VFUJGZΛར༻ w ϨεϙϯγϒσβΠϯΛ࣮ݱ ‣

    ฒͼସ͑ॲཧ͸1$ͱλονσόΠεͰڞ௨
  19. 19.

    ಈ࡞ྫ

  20. 20.

    ૯ׅ w 7VF%SBHHBCMFͰυϥοάυϩοϓͷฒͼସ͑Λ༰қʹ࣮૷Մೳ ‣ ฒͼସ͑΍Πϕϯτॲཧͷهड़͕ෆཁ w ୯ҰͷϦετ͚ͩͰͳ͘ෳ਺ͷϦετΛ·͕ͨͬͨฒͼସ͑΋࣮ݱՄೳ ‣ 5SFMMPͷΑ͏ͳλεΫ؅ཧΞϓϦͷ࡞੒΋࣮ݱՄೳ

  21. 21.

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠