HTML5 Sortable

JavaScript

リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 Sortable」

リスト化した要素をドラッグ&ドロップで並べ替えることができる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はドラッグ&ドロップでの並べ替えができない状態になります。他にもいくつかオプションがあるので詳しくは公式サイトで確認することができます。

関連記事

  1. socialShare.js
  2. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  3. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  4. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  5. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  6. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP