Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

SAW
January 15, 2020

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

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

SAW

January 15, 2020
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

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

    4"8

    View Slide

  2. $(whoami)
    w ࢯ໊Ճ౻फҰ࿠ ࡀ

    ‣ ϋϯυϧωʔϜ4"8
    ϗϥʔ͕ۤखͳͷͰөըl4"8zΛݟͨ͜ͱ͸ͳ͍
    ‣ େࡕࡏॅɾѪ஌ग़਎
    ‣ ॴଐגࣜձࣾ.4&/ ೥໨

    w 5XJUUFS!B[[email protected]
    Vue.js
    macOS
    Linux
    FreeBSD

    View Slide

  3. ओͳ׆ಈ
    w ษڧձͷൃදొஃ
    ‣ WLBOTBJNFFUVQ
    ‣ 7VF+40TBLB
    ‣ 0QFO4PVSDF$POGFSFODF
    ‣ 8FCº1)15FDI$BGF
    w $PEFS%PKPകాϝϯλʔ
    ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ

    View Slide

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

    ‣ ௌߨճ
    WLBOTBJNFFUVQ
    7LBOTBJNFFUVQ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. 7VF%SBHHBCMFͷಋೖͱ࢖͍ํ
    w OQNܦ༝ͰΠϯετʔϧ
    ‣ npm install vuedraggable -D
    w 7VF%SBHHBCMFίϯϙʔωϯτͷεϩοτʹฒͼସ͑ΔཁૉΛࢦఆ
    ‣ v-modelσΟϨΫςΟϒͰ഑ྻΛࢦఆ


    {{ item.value }}


    View Slide

  10. ࣮૷ྫͱڍಈ



    {{ item.value }}



    <br/>import draggable from 'vuedraggable';<br/>export default {<br/>components: { draggable },<br/>data() {<br/>return {<br/>list: [<br/>{ id: 1, value: 'hoge' },<br/>{ id: 2, value: 'piyo' },<br/>{ id: 3, value: 'foo' },<br/>{ id: 4, value: 'bar' },<br/>],<br/>};<br/>},<br/>}<br/>

    View Slide

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

    View Slide

  12. ࣮૷ྫͱڍಈ



    {{ item.value }}




    {{ item.value }}



    <br/>export default {<br/>data() {<br/>return {<br/>todos: [<br/>{ id: 1, value: 'hoge' },<br/>{ id: 2, value: 'piyo' },<br/>{ id: 3, value: 'foo' },<br/>],<br/>dones: [{ id: 4, value: 'bar' }],<br/>};<br/>},<br/>};<br/>

    View Slide

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

    View Slide

  14. σϕϩούπʔϧʹΑΔλάͷൺֱ



    {{ item.value }}






    {{ item.value }}



    λάΛࢦఆ͠ͳ͍৔߹
    liλάΛulλάͰғΉ৔߹

    View Slide

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

    View Slide

  16. ࣮૷ྫͱڍಈ




    {{ item.value }}



    <br/>export default {<br/>data() {<br/>return {<br/>list: [<br/>{ id: 1, value: 'hoge' },<br/>{ id: 2, value: 'piyo' },<br/>{ id: 3, value: 'foo' },<br/>{ id: 4, value: 'bar' },<br/>],<br/>};<br/>},<br/>}<br/>

    View Slide

  17. ΠϕϯτൃՐ࣌ʹॲཧΛ௥Ճ
    w υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕௥ՃՄೳ
    ‣ ฒͼସ͑ͷલॲཧ΍ޙॲཧΛಠࣗʹ࣮૷Մೳ
    ‣ 4PSUBCMFKTͷΠϕϯτΛαϙʔτ
    w 7VF%SBHHBCMFͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ
    ‣ moveϓϩύςΟυϥοά࣌ʹཁૉ͕Ҡಈͨ͠ࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
    ‣ @startσΟϨΫςΟϒυϥοά։࢝࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
    ‣ @endσΟϨΫςΟϒυϥοάऴྃ࣌ʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ
    ‣ @addσΟϨΫςΟϒཁૉ͕ผͷϦετʹυϩοϓ͞ΕͨࡍʹࢦఆͷϋϯυϥͷॲཧΛ࣮ߦ

    View Slide

  18. ࣮ࡍͷར༻ྫ
    w ཱྀߦͷεέδϡʔϧௐ੔ΞϓϦ
    ‣ ϓϥϯͷॱ൪΍೔ఔΛυϥοάυϩοϓͰҠಈՄೳ
    ‣ 6*ίϯϙʔωϯτ͸7VFUJGZΛར༻
    w ϨεϙϯγϒσβΠϯΛ࣮ݱ
    ‣ ฒͼସ͑ॲཧ͸1$ͱλονσόΠεͰڞ௨

    View Slide

  19. ಈ࡞ྫ

    View Slide

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

    View Slide

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

    View Slide