[Javascript]SortableJSの使い方を試す。

yizm

4年前

今日は、SortableJSってのを試してみたいと思います。

１．SortableJSってなんじゃい。

jQueryに依存しないJavascriptライブラリです。
jQuery-uiなんかにもsortableってのがあったと思うけど、最近は脱jQueryというのも流行りだそうなので、せっかっくだしjQueryに依存しないライブラリを試してみようと思った訳です。
名前の通り、並べ替え可能なドラッグアンドドロップリストが簡単にできるようになるよってやつだそうです。
（一応、IE9にも対応してるって、優しいね。?）

本家はこちら。　GitHub - SortableJS

２．さっそくロードして試していく。。。

んじゃ、さっそくコード書いて試していくよー
まず、一番プレーンなやつね。

HTML

<ul id="sample1" class="samplelist">
 	<li>これで、並べ替えができる</li>
 	<li>様になっている</li>
 	<li>はずなんだ。</li>
</ul>

<li>これで、並べ替えができる</li>

<li>様になっている</li>

<li>はずなんだ。</li>

</ul>

Javascript

 var sample1 = document.getElementById('sample1');
 var sortable1 = Sortable.create(sample1);

1 2	var sample1 = document.getElementById('sample1'); var sortable1 = Sortable.create(sample1);

実装

これで、並べ替えができる
様になっている
はずなんだ。

３．ではでは、オプション試してみよー

この、Sortable.createの第二引数に連想配列でいろいろ渡すとオプション機能が使えるみたいよー
ちょっとヌルヌルさせてみる。

Javascript

 var sample2 = document.getElementById('sample2');
 var sortable2 = Sortable.create(sample2, {animation: 100});

1 2	var sample2 = document.getElementById('sample2'); var sortable2 = Sortable.create(sample2, {animation: 100});

実装

すこしぬるっと入れ替わる。
easing使ってぼよよんしてみたかったけど
なんか他にプラグイン必要っぽいんだ。

このままだと、テキストのラベル選択ができなくてドラッグ=移動になってやだなーって時はハンドル付けれるみたい。

HTML

<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>

<li>❤ラベル選択できる？</li>

<li>❤たまーに、コピペしようとして</li>

<li>❤選択できないのってアレだよね。</li>

</ul>

Javascript

 var sample3 = document.getElementById('sample3');
 var sortable3 = Sortable.create(sample3, {animation: 100, handle:".srt_hndl"});

1 2	var sample3 = document.getElementById('sample3'); var sortable3 = Sortable.create(sample3, {animation: 100, handle:".srt_hndl"});

❤　ラベル選択できる？
❤　←ここ選択して並べ変えできるよ。
❤　ラベル選択できないなんてヤダ。

４．ほいじゃー最後にVue.jsと組み合わせつつイベントとか見てこう。

セット！オン！！　ジャキーン?

<script src="https://unpkg.com/vue"></script>

1	<script src="https://unpkg.com/vue"></script>

HTML

<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>

</ul>

最後に発生したイベントは・・・{{ eventname }}

並び順は・・・ {{ sortlist }}

</div>

Javascript

 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;
      }
      });

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 }}

ふむふむ、toArray()で最終的な並び順を取得するときにはdata-idっていう属性値で返ってくるようになるみたいだね?