.net column

.NET開発者のためのブログメディア
カーソルの移動

jQuery UIのSortableを使ってリストをドラッグで並び替える

2020年08月07日

jQuery UIのSortableウィジェットを使うと、リスト項目をドラッグで並び替えることができるようになります。ユーザーにとってより使いやすいアプリケーションを作ることができますので、ぜひ使い方をマスターしていきましょう。

PG
確かに、追加した項目を並び替えできないとちょっと不便ですよね……
PM
ユーザビリティを上げるためにも、並び替えは必須機能といえます。ここで習得しておきましょう!

実行環境
・macOS Catalina 10.15.5
・Repl.it

並べ替えができるリストの作成

さっそく、並べ替えができるリストを実装していきましょう。実装の流れは次のとおりです。

  1. 並べ替えたいリストを作成
  2. Sortableで並べ替え可能にする

以下でそれぞれ解説していきます。

1. 並べ替えたいリストを作成

はじめに、並べ替えたいリストをHTMLで作成します。
コードは次のとおりです。

これで、リストの準備ができました。

2. Sortableで並べ替え可能に

次に、jQuery UIのSortableで先ほどのリストを並べ替えできるようにします。
並べ替えは次のように行います。

先ほどのHTMLのコードに記述すると次のようになります。

これで、並べ替え可能なリストを作成することができました。実行結果は以下のようになります。

動くリストの実行結果

現在の並び順を取得する

並べ替えたリストの順番を取得するためには、並べ替えるたびに更新する「update」と、並び順を取得する「toArray」を使います。

コードは以下のようになります。

以下のように、リストの順番が反映されるようになりました。

リストの順番を抽出

項目を追加できるようにカスタマイズ

最後に、ユーザー側でリストに項目を追加できるようにカスタマイズしていきましょう。
リストを追加するには、jQuery UIの「draggableウィジェット」を使用していきます。

では、全体のコードを見ていきましょう。

実行するとこのようになります。

リストを追加する

Sortableの使い方は以上です。

PG
並べ替えってこんなに簡単に実装できるんですね。
PM
jQuery UIには、Sortable意外にも便利な機能がたくさんあるんですよ。ぜひ調べてみてください!

jQuery UIのSortableでリッチなアプリケーションを作成しよう

今回紹介したとおり、jQuery UIを使えば「ドラッグでリストを並べ替える」というような処理を短いコードで実装することができます。リッチなアプリケーションを作りたい時に便利ですので、ぜひ活用してみましょう。

>>>jQueryの案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)