.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQuery UIのSortableを使ってリストをドラッグで並び替える

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

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jQuery UIのSortableを使ってリストをドラッグで並び替える
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

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

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

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

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

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

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

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

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

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

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

    2. Sortableで並べ替え可能に

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

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

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

    動くリストの実行結果

    現在の並び順を取得する

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

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

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

    リストの順番を抽出

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

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

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

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

    リストを追加する

    Sortableの使い方は以上です。

    プログラマー
    並べ替えってこんなに簡単に実装できるんですね。
    プロジェクト
    マネージャー
    jQuery UIには、Sortable意外にも便利な機能がたくさんあるんですよ。ぜひ調べてみてください!

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

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

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

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job