jQuery UI Sortable - 簡単に要素をドラッグ＆ドロップで並べ替え

この記事では、jQuery UI Sortable コンポーネントについて解説します。このコンポーネントを使用すると、リストやグリッドレイアウトにドラッグ＆ドロップによる並べ替え機能を簡単に追加できます。詳細な例とコードの説明も紹介します。

一、jQuery UI Sortable とは？

• jQuery UI Sortable は、ユーザーがマウスでドラッグ＆ドロップしてページ要素を並べ替えることを可能にする強力なプラグインです。
• リスト、グリッド、その他の HTML 要素の並べ替えをサポートしています。
• 豊富なオプションとイベントを提供し、並べ替え動作を高度にカスタマイズできます。

二、Sortable の機能と特徴

• **使いやすい:** 数行のコードで Sortable 機能を有効にできます。
• **柔軟な設定:** 並べ替え方向、プレースホルダーのスタイル、ドラッグハンドルなどをカスタマイズできます。
• **イベント駆動:** 並べ替え中にカスタム操作を実行するのに便利な、豊富なイベントを提供します。
• **アクセシビリティ:** キーボード操作に対応しており、障害を持つ人でも使用できます。

三、Sortable の基本的な使い方

1. **jQuery と jQuery UI ライブラリを読み込む**:

   
     <link rel="stylesheet" href="jquery-ui.css">
     <script src="jquery.min.js"></script>
     <script src="jquery-ui.min.js"></script>
     

2. **HTML リストまたはグリッドを作成する**:

   
     <ul id="sortable">
       <li class="ui-state-default">項目 1</li>
       <li class="ui-state-default">項目 2</li>
       <li class="ui-state-default">項目 3</li>
     </ul>
     

3. **Sortable を初期化する**:

   
     $( function() {
       $( "#sortable" ).sortable();
       $( "#sortable" ).disableSelection();
     } );
     

四、Sortable のよく使われる設定オプション

五、Sortable のイベント

六、Sortable の例

1. 並べ替え方向を制限する:

$( "#sortable" ).sortable({
  axis: "y" // 垂直方向のみに並べ替えを制限
});

2. プレースホルダーのスタイルをカスタマイズする:

$( "#sortable" ).sortable({
  placeholder: "ui-state-highlight" // プレースホルダーの CSS クラスを設定
});

3. ドラッグハンドルを指定する:

$( "#sortable" ).sortable({
  handle: ".handle" // class が "handle" の要素上でのみドラッグ可能
});

4. 並べ替え結果を保存する:

$( "#sortable" ).sortable({
  update: function( event, ui ) {
    // AJAX リクエストを送信して、並べ替え結果をサーバーに保存
  }
});

七、まとめ

jQuery UI Sortable は、ドラッグ＆ドロップによる並べ替え機能を実装するための簡単で使いやすい方法を提供します。豊富なオプションとイベントにより、さまざまなカスタマイズのニーズに対応でき、インタラクティブな Web アプリケーションを開発するための強力なツールです。

jQuery UI Sortable に関する Q&A

Q1: Sortable で並べ替え可能な要素の数を制限することはできますか？

A1: はい、 `maxItems` オプションを使用することで制限できます。例えば、`$( "#sortable" ).sortable({ maxItems: 5 });` とすると、最大5つの要素しか並べ替えられなくなります。

Q2: Sortable で特定の要素を並べ替え不可にすることはできますか？

A2: はい、 `items` オプションを使用することで、並べ替え可能な要素をセレクタで指定できます。例えば、`$( "#sortable" ).sortable({ items: "> li:not(.unsortable)" });` とすると、 `.unsortable` クラスを持つ要素以外が並べ替え可能になります。

Q3: 並べ替え中に要素のスタイルを変更するにはどうすればよいですか？

A3: `start` イベントと `stop` イベントを利用して、要素のスタイルを変更できます。例えば、ドラッグ中は要素にクラスを追加し、ドラッグが終わったらクラスを削除することで、視覚的に分かりやすくすることができます。