Jqueryでテーブルの行をドラッグ&ドロップで並び替える

テーブルの行を自由に並び替える機能を追加できる「Table Drag and Drop JQuery plugin」という素晴らしいJqueryプラグインを見つけて、使ってみました。
今回はこのプラグインを使って、CloudPaper内の見積・請求書作成のシーンにて、項目をドラッグ&ドロップで並び替えができるように改良しました。
テーブルの行を直感的に並び替えできる
今回はこのように見積項目をドラッグ&ドロップで並び替えできるようにしてみました。今回のプラグインを使わない方法としては、例えば順番の入力枠を設けて、数字で並び替える機能を作ったりしないといけませんが、時間もかかりますし、使いづらいものとなってしまいます。
使い方
まず、Jqueryとともに「Table Drag and Drop JQuery plugin」をダウンロードして読み込みます。
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.tablednd.0.7.min.js" charset="UTF-8"></script> <script> $(function(){ $("table").tableDnD({ dragHandle: ".handle img" }); }); </script> <style> .tDnD_whileDrag { background-color: #E8F1FB; } .handle img{ cursor: move; } </style>
スタイルシートではドラッグ時の行の背景色や、マウスオーバー時のオーバー画像を差し替えたりしています。
またスクリプトの読み込み時に、dragHandle: “.handle img”とオプションを指定していますが、これはhandleクラスの画像はドラッグ出来るようにするという記述です。これで、一番左の画像をドラッグして行を並び替えれるようにしています。
例えば行全体をクリックさせる場合はオプションなしの
<script> $(function(){ $("table").tableDnD(); });
これで、行全体がクリック出来るようになります。
つぎに並び替え用のテーブルは、このように作ります。
<table> <tr class="nodrop nodrag"> <th>項目A</th> <th>項目B</th> <th>項目C</th> </tr> <tr> <td class="handle"><img src="narabikae.png"></td> <td>ああああああああ</th> <td>いいいいいいいい</th> <td>うううううううう</th> </tr> <tr> <td class="handle"><img src="narabikae.png"></td> <td>ええええええええ</th> <td>おおおおおおおお</th> <td>かかかかかかかか</th> </tr> </table>
classでnodrop nodragを指定すると、その行はドラッグできないようになります。見出しなので並び替えさせないようにしています。
Table Drag and Drop JQuery plugin
フリーランスエンジニアの稼ぎ方
SPONSOR
PROFILE
プロフィール

入江 慎吾
受託開発で年3,000万以上を売り上げるも、受託をやめることを決意 / 自分のサービスで生きていくために挑戦中🔥現在プロダクトの売上は月40万円 / 個人開発コミュニティ「入江開発室」を運営(約300名) / MENTAなど20個以上のプロダクトを開発。
(詳しいプロフィール)
受託開発で年3,000万以上を売り上げるも、受託をやめることを決意 / 自分のサービスで生きていくために挑戦中🔥現在プロダクトの売上は月40万円 / 個人開発コミュニティ「入江開発室」を運営(約300名) / MENTAなど20個以上のプロダクトを開発。
(詳しいプロフィール)
PRODUCT
イリテクで開発したプロダクト
SPONSOR