サイトアイコン わんすけに聞いてみる

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



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

1.SortableJSってなんじゃい。

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

本家はこちら。 GitHub - SortableJS

2.さっそくロードして試していく。。。

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

HTML
<ul id="sample1" class="samplelist">
 	<li>これで、並べ替えができる</li>
 	<li>様になっている</li>
 	<li>はずなんだ。</li>
</ul>
Javascript
 var sample1 = document.getElementById('sample1');
 var sortable1 = Sortable.create(sample1);
実装
3.ではでは、オプション試してみよー

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

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

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

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>
Javascript
 var sample3 = document.getElementById('sample3');
 var sortable3 = Sortable.create(sample3, {animation: 100, handle:".srt_hndl"});
4.ほいじゃー最後にVue.jsと組み合わせつつイベントとか見てこう。

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

<script src="https://unpkg.com/vue"></script>
 HTML
<div id="app">
    <ul id="sample4" class="samplelist">
 	<li data-id=1>LIST:1</li>
 	<li data-id=2>LIST:2</li>
 	<li data-id=3>LIST:3</li>
    </ul>
    
    <p>最後に発生したイベントは・・・{{ eventname }}</p>
    <p>並び順は・・・ {{ sortlist }}</p>
</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;
      }
      });

 

実装
  • LIST:1
  • LIST:2
  • LIST:3
最後に発生したイベントは・・・{{ eventname }}

{{ sortlist }}

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

 

モバイルバージョンを終了