jQuery UIのSortableを使ってリストをドラッグで並び替える
jQuery UIのSortableウィジェットを使うと、リスト項目をドラッグで並び替えることができるようになります。ユーザーにとってより使いやすいアプリケーションを作ることができますので、ぜひ使い方をマスターしていきましょう。
- PG
- 確かに、追加した項目を並び替えできないとちょっと不便ですよね……
- PM
- ユーザビリティを上げるためにも、並び替えは必須機能といえます。ここで習得しておきましょう！
実行環境
・macOS Catalina 10.15.5
・Repl.it
目次
並べ替えができるリストの作成
さっそく、並べ替えができるリストを実装していきましょう。実装の流れは次のとおりです。
- 並べ替えたいリストを作成
- Sortableで並べ替え可能にする
以下でそれぞれ解説していきます。
1. 並べ替えたいリストを作成
はじめに、並べ替えたいリストをHTMLで作成します。
コードは次のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!Doctype html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル Sortable</title> </head> <body> <!-- 並べ替えたいリストを用意 --> <ul id="sortable"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html> |
これで、リストの準備ができました。
2. Sortableで並べ替え可能に
次に、jQuery UIのSortableで先ほどのリストを並べ替えできるようにします。
並べ替えは次のように行います。
|
1 |
$( "id / class名" ).sortable(); |
先ほどのHTMLのコードに記述すると次のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!Doctype html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル Sortable</title> <!-- jQuery、jQuery UIの読み込み --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- Sortableの実装 --> <script> $( function() { // リストを並べ替え可能に $( "#sortable" ).sortable(); } ); </script> </head> <body> <!-- 並べ替えたいリスト --> <ul id="sortable"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html> |
これで、並べ替え可能なリストを作成することができました。実行結果は以下のようになります。
現在の並び順を取得する
並べ替えたリストの順番を取得するためには、並べ替えるたびに更新する「update」と、並び順を取得する「toArray」を使います。
コードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!Doctype html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル Sortable</title> <!-- jQuery、jQuery UIの読み込み --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- Sortableの実装 --> <script> $(function() { // リストを並べ替え可能に $('#sortable').sortable({ // updateで並べ替えるたびに更新 update: function(){ // toArrayで現在の順番を取得し出力 $("#log").text($('#sortable').sortable("toArray")); } }); }); </script> </head> <body> <!-- リストにid属性を追加 --> <ul id="sortable"> <li id="1">項目1</li> <li id="2">項目2</li> <li id="3">項目3</li> </ul> <p>リストの順番は「<span id="log"></span>」です</p> </body> </html> |
以下のように、リストの順番が反映されるようになりました。
項目を追加できるようにカスタマイズ
最後に、ユーザー側でリストに項目を追加できるようにカスタマイズしていきましょう。
リストを追加するには、jQuery UIの「draggableウィジェット」を使用していきます。
|
1 2 3 |
$('#追加するリストのid').draggable({ connectToSortable: '#追加先のリストのid' }); |
では、全体のコードを見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!Doctype html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル Sortable</title> <!-- jQuery、jQuery UIの読み込み --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- Sortableの実装 --> <script> $(function() { // リストを並べ替え可能に $('#sortable').sortable(); // 追加するリストのid $('#draggable').draggable({ // 追加先のリストid connectToSortable: '#sortable' }); }); </script> </head> <body> <div id="parentList"> <ul id="sortable"> <li id="1">項目1</li> <li id="2">項目2</li> <li id="3">項目3</li> </ul> <ul> <li id="draggable">項目をドラッグで追加</li> </ul> </div> </body> </html> |
実行するとこのようになります。
Sortableの使い方は以上です。
- PG
- 並べ替えってこんなに簡単に実装できるんですね。
- PM
- jQuery UIには、Sortable意外にも便利な機能がたくさんあるんですよ。ぜひ調べてみてください！
jQuery UIのSortableでリッチなアプリケーションを作成しよう
今回紹介したとおり、jQuery UIを使えば「ドラッグでリストを並べ替える」というような処理を短いコードで実装することができます。リッチなアプリケーションを作りたい時に便利ですので、ぜひ活用してみましょう。
