今日は、SortableJSってのを試してみたいと思います。
１．SortableJSってなんじゃい。
jQueryに依存しないJavascriptライブラリです。
jQuery-uiなんかにもsortableってのがあったと思うけど、最近は脱jQueryというのも流行りだそうなので、せっかっくだしjQueryに依存しないライブラリを試してみようと思った訳です。
名前の通り、並べ替え可能なドラッグアンドドロップリストが簡単にできるようになるよってやつだそうです。
（一応、IE9にも対応してるって、優しいね。?）
本家はこちら。 GitHub - SortableJS
２．さっそくロードして試していく。。。
んじゃ、さっそくコード書いて試していくよー
まず、一番プレーンなやつね。
HTML
|
1 2 3 4 5 |
<ul id="sample1" class="samplelist"> <li>これで、並べ替えができる</li> <li>様になっている</li> <li>はずなんだ。</li> </ul> |
Javascript
|
1 2 |
var sample1 = document.getElementById('sample1'); var sortable1 = Sortable.create(sample1); |
実装
- これで、並べ替えができる
- 様になっている
- はずなんだ。
３．ではでは、オプション試してみよー
この、Sortable.createの第二引数に連想配列でいろいろ渡すとオプション機能が使えるみたいよー
ちょっとヌルヌルさせてみる。
Javascript
|
1 2 |
var sample2 = document.getElementById('sample2'); var sortable2 = Sortable.create(sample2, {animation: 100}); |
実装
- すこしぬるっと入れ替わる。
- easing使ってぼよよんしてみたかったけど
- なんか他にプラグイン必要っぽいんだ。
このままだと、テキストのラベル選択ができなくてドラッグ=移動になってやだなーって時はハンドル付けれるみたい。
HTML
|
1 2 3 4 5 |
<ul id="sample3" class="samplelist"> <li><span class="srt_hndl">❤</span>ラベル選択できる？</li> <li><span class="srt_hndl">❤</span>たまーに、コピペしようとして</li> <li><span class="srt_hndl">❤</span>選択できないのってアレだよね。</li> </ul> |
Javascript
|
1 2 |
var sample3 = document.getElementById('sample3'); var sortable3 = Sortable.create(sample3, {animation: 100, handle:".srt_hndl"}); |
- ❤ ラベル選択できる？
- ❤ ←ここ選択して並べ変えできるよ。
- ❤ ラベル選択できないなんてヤダ。
４．ほいじゃー最後にVue.jsと組み合わせつつイベントとか見てこう。
セット！オン！！ ジャキーン?
|
1 |
<script src="https://unpkg.com/vue"></script> |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div id="app"> <ul id="sample4" class="samplelist"> <li data-id=1>LIST：１</li> <li data-id=2>LIST：２</li> <li data-id=3>LIST：３</li> </ul> <p>最後に発生したイベントは・・・{{ eventname }}</p> <p>並び順は・・・ {{ sortlist }}</p> </div> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var app = new Vue({ el: "#app", data: { eventname : "", sortlist : "", }, methods : { putsortable : function (e) { this.sortlist = sortable4.toArray().join(','); } } }); var sample4 = document.getElementById('sample4'); var sortable4 = Sortable.create(sample4, {animation: 100, onStart: function (evt) { app.eventname = 'onStart : evt.oldIndex ⇒ ' + evt.oldIndex; }, onMove: function (evt) { app.eventname = 'onMove'; }, onEnd : function (evt) { app.eventname = 'onEnd : evt.newIndex ⇒ ' + evt.newIndex; } }); |
実装
- LIST：１
- LIST：２
- LIST：３
最後に発生したイベントは・・・{{ eventname }}
{{ sortlist }}
ふむふむ、toArray()で最終的な並び順を取得するときにはdata-idっていう属性値で返ってくるようになるみたいだね?
