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

2017/02/15 , ,

テーブルのデータをドラッグ&ドロップにより順番を入れ替えたい場合、jQuery UI を利用すれば簡単に実装することができます。例えば、次のテーブルをご覧ください。

No.タイトルアーティスト名
1Master of PuppetsMETALLICA
2ラブストーリーback number
3TEENAGERフジファブリック
4Love YouCymbals
5DANDYISMDOPING PANDA

このままでは、行の入れ替えをすることはできませんが、jQuery で1行定義してあげるだけで、このデータ部分を入れ替えられるようになります。

なお、jQuery UI を使うためには、jQuery と jQuery UI 関連のファイルを読み込む必要があります。過去のエントリーで、JavaScript ファイル・CSS ファイルの読み込みについて記載しているので、そちらを参考にしてください。

jQuery UI ファイルの読込みを Google の Libraries サイト (CDN) から参照する方法
※ 2015/9/2 記事内のjQuery UI のバージョンを 1.10.3 から 1.11.4 へ変更しました。jQuery UI を利用するには、jQu...

テーブル行データを入れ替える

まず始めに、このhtmlの構造から説明します。ポイントとしては、普段省略している thead タグ、tbody タグをきちんと定義する必要があります。そして、tbody タグ内のデータに対して、ドラッグ&ドロップにより入れ替えが出来るように jQuery UI でのメソッドを仕掛けるのです。

tbody タグにID属性を設定し、データ部分だけが操作できるようにします。ここまで出来上がれば、あとは次の1行を書いてあげるだけです。

はい、これだけです。それでは実際に動くサンプルを見てみましょう。

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

No.タイトルアーティスト名
1Master of PuppetsMETALLICA
2ラブストーリーback number
3TEENAGERフジファブリック
4Love YouCymbals
5DANDYISMDOPING PANDA

さて、簡単に実装できましたね。しかし、実際に動かしてみて気になることがありませんか?一番左の列の No. の項目が、グチャグチャになってしまいますね。この番号だけは1から通し番号を振りたい場合は、ドラッグ&ドロップにより入れ替えが終わったタイミングで、セルの中身を差し替えてあげる必要があります。

続いては、ドラッグ&ドロップによる入れ替え後に番号を振り直してみましょう。

テーブル行入れ替え後のセル値の操作

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

順番入れ替えが完了したタイミングで「sortstop」イベントが起こるので、このイベントを以下のようにバインドし、No.の差し替えを行います。

それでは、こちらもサンプルで動作を確認してみてください。

テーブル行のドラッグ&ドロップによる順番入れ替えと同時に、No.の値を差し替える

No.タイトルアーティスト名
1Master of PuppetsMETALLICA
2ラブストーリーback number
3TEENAGERフジファブリック
4Love YouCymbals
5DANDYISMDOPING PANDA


これで完璧ですね。

今回は紹介しませんが、この方法を上手く流用すれば、セル内に input 要素があった場合には、その ID や name 属性を差し替えることもできるので、順番を入れ替えた状態できちんと POST することも可能になります。

PAGE TOP ↑