jQuery UI を利用したテーブル行のドラッグ&ドロップによる入れ替え方法

更新日: 公開日:2015/04/07
jQuery UI でテーブルのドラッグ&ドロップを実装

jQuery UI の Sortable を利用すれば、たった1行でテーブルの行をドラッグ&ドロップで入れ替えられるようになります。

なおここで紹介する方法は、前提として jQuery、jQuery UI のライブラリを読み込む必要があります。ネットワーク環境にアクセスできるサイトであれば CDN を利用することも可能です。

では早速サンプルプログラムで説明していきましょう。例として次のテーブルを利用します。

No.タイトル発売日
1スプラトゥーン22017年7月21日
2スーパーマリオ・オデッセイ2017年10月27日
3アームズ2017年6月16日
41-2-Switch2017年3月3日
5モンスターハンター XX2017年8月25日

まだ何も処理をしていないので、この段階では行を入れ替えることはできません。

jQuery UI でテーブルの行を入れ替える

まず始めに、この html の構造から説明します。ポイントは theadtbody のタグをきちんと定義することです。普段これらのタグは省略されることが多いですが、ここでは必要になります。

そして jQuery UI の Sortable メソッドを仕掛けることで、tbody タグに含まれるデータ行が ドラッグ&ドロップ で入れ替えられるようになります。

テーブルの構造【HTML】
<table>
<thead>
  <tr>
    <th>No.</th>
    <th>タイトル</th>
    <th>発売日</th>
  </tr>
</thead>
<!--tbodyにID属性を指定します-->
<tbody id="sortdata">
  <tr>
    <th>1</th>
    <td>スプラトゥーン2</td>
    <td>2017年7月21日</td>
  </tr>
  <tr>
    <th>2</th>
    <td>スーパーマリオ・オデッセイ</td>
    <td>2017年10月27日</td>
  </tr>
  <tr>
    <th>3</th>
    <td>アームズ</td>
    <td>2017年6月16日</td>
  </tr>
  <tr>
    <th>4</th>
    <td>1-2-Switch</td>
    <td>2017年3月3日</td>
  </tr>
  <tr>
    <th>5</th>
    <td>モンスターハンター XX</td>
    <td>2017年8月25日</td>
  </tr>
</tbody>
</table>

更にもう1つ重要なポイントは tbody タグに id 属性を指定することです。あとはこの id を持つ要素に対して、JavaScript で次の1行を実行すれば完成です。

テーブル行のドラッグ&ドロップ【JavaScript】
$('#sortdata').sortable();

それではこれらを実装したサンプルをご覧ください。

テーブル行のドラッグ&ドロップによる順番入れ替えサンプル

No.タイトル発売日
1スプラトゥーン22017年7月21日
2スーパーマリオ・オデッセイ2017年10月27日
3アームズ2017年6月16日
41-2-Switch2017年3月3日
5モンスターハンター XX2017年8月25日

単に行入れ替えをしただけなので、一番左側に定義した No. の列もそのまま入れ替わってしまいます。

もし入れ替え処理が終わった段階で処理を走らせることができれば、この番号を振り直すことができます。そこで、もう少し機能を拡張して、ドラッグ&ドロップの処理が終わったタイミングで、セルの中身を差し替える処理を加えてみましょう。

テーブル行入れ替え後にセル値を操作する

先ほどの HTML のままでも対応することはできますが、もう少し扱い易くするために、tbody 内の No. のデータ部分の th タグ内に name 属性「num_data」を一律設定することにします。

そして .sortable() で動くようになったテーブルは、ドラッグ&ドロップが完了した時点で .sortstop() のイベントが発生します。つまりこのイベントをバインドすれば、指定列の値を差し替えられるようになります。

テーブル行入れ替え後のセル値を更新
// sortstopイベントをバインド
$('#sortdata').bind('sortstop',function(){
  // 番号を設定している要素に対しループ処理
  $(this).find('[name="num_data"]').each(function(idx){
    // タグ内に通し番号を設定(idxは0始まりなので+1する)
    $(this).html(idx+1);
  });
});

テーブルの行移動後にセル値を更新するサンプル

No.タイトル発売日
1スプラトゥーン22017年7月21日
2スーパーマリオ・オデッセイ2017年10月27日
3アームズ2017年6月16日
41-2-Switch2017年3月3日
5モンスターハンター XX2017年8月25日

処理が複雑になるためここでは紹介しませんが、移動した行内の値を差し替えるテクニックを応用すれば、セル内の input 要素の id や name 属性を変更することも可能になります。

フォームオブジェクトを操作できるようになると、並び順を考慮してデータベースを更新できたり、とても便利になります。単に行入れ替えするだけでは何も役に立たないので、機能を拡張することを前提にご利用いただければと思います。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。