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. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  2. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  3. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  4. PWS Tabs jQuery Plugin
  5. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  6. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

コメント

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

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

最近の記事

  1. セミの抜けがら
  2. Nikeスポーツバンド(アンスラサイト/ブラック)
  3. COMOLI 和紙コットンリストバンド
  4. スターバックス インドネシア アチェ
  5. ベーコンとほうれん草のキッシュ

アーカイブ

PAGE TOP