リスト化した要素をドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 Sortable」を使ってみました。なかなか便利な機能かと思います。HTML5のドラッグ&ドロップのAPIを使用して構築されているみたいですね。プラグインファイルもかなり軽量なのも嬉しいです。ということで、以下、使い方です。
[ads_center]
使い方
jQuery本体とダウンロードしたプラグインファイル「jquery.sortable.js」を読み込み、HTML5 Sortableをセットします。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.sortable.js"></script>
<script>
$(function(){
$('.sortable').sortable();
});
</script>
マークアップもこれ以上ないくらいシンプルです。
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
あとはCSSでスタイルを整えてあげればOK。動作だけならこれだけで動きます。
リスト内で指定したアイテムだけを無効にしたい場合は以下のようなオプションを使用することができます。
<script>
$(function(){
$('.sortable').sortable({
items: ':not(.disabled)'
});
});
</script>
無効にしたい要素にdisabledというクラス名を追加します。
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li class="disabled">Item 3</li>
<li class="disabled">Item 4</li>
</ul>
これで、Item3と4はドラッグ&ドロップでの並べ替えができない状態になります。他にもいくつかオプションがあるので詳しくは公式サイトで確認することができます。
