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

WordPressのContact Form 7にCAPTCHAを導入するためのプラグイン「Really Simple CAPTCHA 」前のページ

多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」次のページRefineSlide

関連記事

  1. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  2. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  3. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  4. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  5. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  6. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

コメント

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

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

最近の記事

  1. 十和田湖
  2. 富有柿
  3. アイリスオーヤマの加湿器
PAGE TOP