• こんにちは

  • 今日話す内容

    • Vue.draggale を使おうと思った経緯
    • Vue.draggale について
    • Vue.draggale の基本的な使い方
    • 並び順の永続化について
    • Vue.draggale の並び替えを s/Sort/Swap/ にしたい場合の tips
  • Vue.draggale を使おうと思った経緯

    • 英語の勉強がしたくなった
    • そうだ。エンジニアらしく英語の勉強ができるサービスを作ろう
    • みんなで共有できる単語帳を作ればいいかも
    • つくった
    • 登録した単語を並び替えたい
    • Vue.draggale に出会った
  • Vue.draggable とは

    • Trello のようなドラッグ&ドロップでリストをごにょごにょできる
    • Sortable.js を Vue component にしたもの
    • jQueryUI を使わずに実装できる
    • タッチデバイスにも対応している
    • とにかくいろいろすごい
  • 実際に見てみましょう

    Demo

  • 使い方

  • 基本的な使い方

    <table> の場合は以下のようにします


    • draggable component を<tbody>として配置
    • draggable になる配列は子要素。この場合は<tr>となる
    • draggable にしたい配列を v-model にセット
    • <tr>がドラッグされると v-model にセットされた配列が都度変更される
  • ものすごく簡単に実装できた

    お洒落でかっこいい UI の Vue.draggable を使ってフロント側で並び替えを行うことに成功しました。

    Before: [1, 2, 3, 4]
    After:  [2, 3, 4, 1]
    

    でもドラッグする度にたくさんの item が reorder されている

  • 永続化

  • 並び順を永続化したい

    もしかしたらサーバーサイドエンジニアは sort ではなく swap してほしいかもしれません

    // sort
    Before: [1, 2, 3, 4]
    After:  [2, 3, 4, 1]
    
    // swap
    Before: [1, 2, 3, 4]
    After:  [4, 2, 3, 1]
    
  • 実は Vue.draggale は swap 機能がありません

    PR が merge される可能性は?

    the answer is no!!

    Is there any chance of adding swap functionality from the swap branch?
    
    // David-Desmaisons:
    I will only release draggable version based on sortable version available on npm.
    the answer is no.
    
  • でも頑張って s/Sort/Swap/ してみました

    • イベントを横取りしてごにょごにょした
    • dragging イベントの返り値を false にして sort を無効化
    • 無効化しつつ drop されるであろう index を保存してくおく
    • drag 終了のタイミングでいろいろとつじつまを合わせている
    • 詳しいことは Blog に書いたので興味ある方はご覧ください
  • まとめ

    • Vue.draggalbe はすごい、かんたん、気持ちいい
    • なんだけど永続化するならサーバーサイドと要相談
    • 基本的に Sortable は Swap するようにデザインはされてません
    • どちらかというと Trello のような複数のリストをごにょごにょする場面で便利かも
    • 今日の話はなんとなく程度、頭の片隅に入れておくと良いでしょう
  • 時間が余ったら

    Demo

  • あとそれから

    • 絶賛お仕事募集中です
    • Vue.js, React.js が得意です
    • 週2, 3 でフルリモートの案件をお待ちしております
  • ご静聴ありがとうございました

Item 1 of 17
[ja]Vue.draggable for Beginners