Chrome Life

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

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

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のプラグインでラップしている方が開発しやすいと思います。

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

それでは、また!

HTML5+CSS3のオススメ書籍

タグ: , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。