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

    େࡕࡏॅɾѪ஌ग़਎ ‣ ॴଐגࣜձࣾ.4&/ ೥໨  w 5XJUUFS!B[VLJ@FBUFS Vue.js macOS Linux FreeBSD
  2. ओͳ׆ಈ w ษڧձͷൃදొஃ ‣ WLBOTBJNFFUVQ ‣ 7VF+40TBLB ‣ 0QFO4PVSDF$POGFSFODF ‣

    8FCº1)15FDI$BGF w $PEFS%PKPകాϝϯλʔ ‣ കాͰࢠڙͷϓϩάϥϛϯάֶशΛࢧԉ
  3. WLBOTBJNFFUVQࢀՃྺ w ࢀՃճ਺ճ ‣ ొஃճ  WLBOTBJNFFUVQηογϣϯൃද  WLBOTBJNFFUVQ-5ൃද 

    WLBOTBJNFFUVQηογϣϯൃද ࠓճ  ‣ ௌߨճ  WLBOTBJNFFUVQ  7LBOTBJNFFUVQ
  4. 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>
  5. ࣮૷ྫͱڍಈ <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>
  6. ࣮૷ྫͱڍಈ <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>
  7. σϕϩούπʔϧʹΑΔλάͷൺֱ <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λάͰғΉ৔߹
  8. ࣮૷ྫͱڍಈ <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>
  9. ΠϕϯτൃՐ࣌ʹॲཧΛ௥Ճ w υϥοάυϩοϓͷͦΕͧΕͷΠϕϯτൃՐ࣌ʹॲཧ͕௥ՃՄೳ ‣ ฒͼସ͑ͷલॲཧ΍ޙॲཧΛಠࣗʹ࣮૷Մೳ ‣ 4PSUBCMFKTͷΠϕϯτΛαϙʔτ w 7VF%SBHHBCMFͷίϯϙʔωϯτͰΠϕϯτϋϯυϥΛࢦఆ ‣

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