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

10/30/2012

テーブルの行を自由に並び替える機能を追加できる「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

[sc name=”engeneer”]

無料メルマガ＜特典付き＞

個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。

特典：個人開発の教科書＜心得編＞

これまでの個人開発経験を秘伝のタレ的な内容としてエッセンスをまとめました。35ページにわたる大ボリュームです。

個人開発のスキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも個人開発ノウハウを発信中！

PROFILE

入江慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。（詳しいプロフィール）