HTML5ドラッグ＆ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」

HTML5ではドラッグ＆ドロップAPIが提供されています。このAPIを利用すれば要素の並び替えなどをアドオンなしで実装することも可能です。

しかし、汎用的なものを作るとなると少し面倒です。

そこで今回ご紹介するのは、HTML5ドラッグ＆ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」です。

「HTML5 Sortable」は、ネイティブHTML5のドラッグ＆ドロップAPIを使用して構築されているので超軽量です。

HTMLのコードは下記のようにして使います。

<ul class="sortable">
    <li>Item 1
    <li>Item 2
    <li>Item 3
    <li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
    $('.sortable').sortable();
</script>

リストとグリッドの両方に対応しています。

ドラッグ無効なリストやバンドル付リストを作ることも可能です。

よくある、左右のリストの並び替えも簡単に実装できます。

jquery-ui sortable pluginに似たAPIを提供しています。

ライセンスはMITライセンスです。

開発者からのメッセージによると、jquery-html5sortableプラグインを試したがIEでは動かなかったので作ったようです。
※筆者のIE Testerで試したところIE6では動かず、IE7以降で動作しました。

ソースコードは非常に短いのでコードリーディングにも最適だと思います。

HTML5のAPIはパワフルなのですが、そのまま使うよりも「HTML5 Sortable」のようなjQueryのプラグインでラップしている方が開発しやすいと思います。

是非、チェックしてみてください。

それでは、また！