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

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

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

jQuery UI のファイル読込みを CDN のライブラリから参照する方法

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の３ファ...

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

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

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

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

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

<table>
<thead>
  <tr>
    <th>No.</th>
    <th>タイトル</th>
    <th>発売日</th>
  </tr>
</thead>
<!--tbodyにID属性を指定します-->
<tbody id="sortdata">
  <tr>
    <th>1</th>
    <td>スプラトゥーン２</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>

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

$('#sortdata').sortable();

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

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

単に行入れ替えをしただけなので、一番左側に定義した 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);
  });
});

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

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

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