jQuery UIを公式リファレンスを見ながらいじってみた #JavaScript

liタグを並び替える処理を実装する時に初めてjQueryUiを使ったので、実装の仕方と気になったところをまとめました。

公式リファレンスの見方

左サイドバーに各機能名が書いてあり、リンク先にデモページがあります。
デモの少し下にあるview sourceを押すとソースが見れます。

基本的にはこのソースをhtmlに貼り付ければそのまま動くと思います。

また、API documentationを押すと各機能ごとのオプションやメソッド一覧ページに飛ぶので、そこを見ながらいじっていきます。

sortableの使い方

デモページ : https://jqueryui.com/sortable/
からview sourceを貼り付けたら動きました。
ただ、分かりやすいように一時的に必要最小限にしてみました。

sort.html

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li>gori</li>
  <li>bosu</li>
  <li>megane</li>
</ul>
<script>
$(function(){
  $("#sortable").sortable();
});
</script>

上の二行でjqueryとjquery-uiを読み込んで、あとはulの中のliをソートできるという処理です。
かなりコンパクトになりました。

オプションを色々試してみる

APIドキュメント : http://api.jqueryui.com/sortable/
を参考に設定してみます。

items(Options)

オプションです。要素内のどの項目をソート可能にするかを指定できます。

sort.html

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
- <li>gori</li>
- <li>bosu</li>
+ <li class="item">gori</li>
+ <li class="item">bosu</li>
  <li>megane</li>
</ul>
<script>
$(function(){
  $("#sortable").sortable({
+   items: ".item"
  });
});
</script>

これでitemクラスを振ったliだけソート可能になりました。

axis(Options)

オプションです。xかyを設定してドラッグ可能な方向を指定できます。

sort.html

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="item">gori</li>
  <li class="item">bosu</li>
  <li>megane</li>
</ul>
<script>
$(function(){
  $("#sortable").sortable({
    items: ".item",
+   axis: "y"
  });
});
</script>

これで縦のみの動きになりました。横に動かそうと思っても全く動きません。

destroy(Methods)

メソッドです。ソート可能な機能を完全に削除します。

sort.html

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="item">gori</li>
  <li class="item">bosu</li>
  <li>megane</li>
</ul>
<script>
$(function(){
  $("#sortable").sortable({
    items: ".item",
    axis: "y"
  });
+ $("#sortable").sortable("destroy");
});
</script>

これで全くソートできなくなりました。ある条件でソートさせないようにする時に使えそうです。

change(Events)

イベントです。ソートしてDOMの位置が変更された場合に実行されます。

sort.html

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="item">gori</li>
  <li class="item">bosu</li>
  <li>megane</li>
</ul>
<script>
$(function(){
  $("#sortable").sortable({
    items: ".item",
    axis: "y",
+   change: function(event, ui){
+     console.log("sort!!");
+   }
  });
- $("#sortable").sortable("destroy");
});
</script>

これでソートしてliの位置が入れ替わった瞬間にconsole.logが出力されました。
簡単にイベントの設定も行えるので、かなり便利ですね。

引数として渡しているeventとuiは渡さなくても動きます。
ただ、DOMの位置情報など様々なデータが入っているので、色々使えそうです。

まとめ

jQuery UIの中の1機能だけ使いましたが、これだけでもかなりの量のオプションやメソッド、イベントがあります。
使いたい機能をリファレンスでさくっと調べて使いこなせるようになれば、色々捗ると思いました。