Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

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以降で動作しました。

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

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

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

それでは、また!