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. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  2. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  3. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  4. no-image
  5. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP