Vue.js わずか4行でドラッガバブルなリストを実装する
Vue.jsでtableタグのソート機能はデフォルトで存在していますよね。
ただ、tableタグ限定だったり、昔jQueryではやったtablesorterだと行をドラッグandドロップで場所を変更できましたが、Vue.jsのプラグインを入れてわずか４行で、ほぼセレクタを入れるだけで実装できるプラグインを紹介します。
npmでインストール
npm install --save-dev vue-sortable
vue.jsはすでによみこんでいるものとします。
gist
基本的にはcomponentのセレクタを指定して、あとはHTMLにソートしたい要素にlist-group-item、それをラップする要素にlist-groupというclassを当てるだけでドラッガバブルになります
簡単！