jQueryプラグイン、TableDnDを使用してテーブルの行をドラッグ&ドロップで並び替える方法を紹介します。
今回使用するプラグインは、いろいろな機能がありますが、ここでは一番シンプルな並び替えを行う機能のみを紹介します。
プラグインをダウンロードするとサンプルのHTMLがありますので、その他の機能はそちらをご覧ください。
1 | One | some text |
2 | Two | some text |
3 | Three | some text |
4 | Four | some text |
5 | Five | some text |
6 | Six | some text |
まずは、TableDnDからプラグインをダウンロードします。
tablednd.cssを読込みます。こちらはテーブルなどのデザインとなりますので、自由に変更ください。
<link rel="stylesheet" href="tablednd.css" type="text/css"/>
以下の2つのJavaScriptを読込みます。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
jQueryを以下のように記述します。
$(document).ready(function() {
$("#table-1").tableDnD();
});
HTMLでは以下のようにテーブルを作成します。
<div class="tableDemo">
<table id="table-1" cellspacing="0" cellpadding="2">
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</div>
たったこれだけで、サンプルのようにドラッグ&ドロップでテーブルを並び替えることができます。
その他にもいろいろ用意されていますので、お試しください。