Tableの行がドラッグアンドドロップできる「Table Drag and Drop」
当ページのリンクには広告が含まれています。
スポンサーリンク
Tableの行がドラッグアンドドロップできるjQueryプラグイン「Table Drag and Drop」を紹介します。
jQueryプラグイン「Table Drag and Drop」
Table Drag and Dropは、ドラッグアンドドロップでTable行の入れ替えを実現するjQueryプラグインです。
スポンサーリンク
実際にデモでドラッグアンドドロップをやってみてください。すっげーよー！
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Table Drag and Drop - jQueryプラグインまとめのカルマ</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.tablednd.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table-1").tableDnD();
});
</script>
</head>
<body>
<h1>Table Drag and Dropのデモでーす。</h1>
<p>Tableの行が誤った順序に！ ドラッグアンドドロップで適切な順序に戻してみましょう。</p>
<table id="table-1" border="1" cellspacing="0" cellpadding="2">
<tr id="4"><td>4</td><td>Four</td><td>だぁぁぁぁぁ</td></tr>
<tr id="1"><td>1</td><td>One</td><td>いち！</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>さん！</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>にー！</td></tr>
</table>
</body>
</html>
オプションや詳細はこちらからどうぞ。
» Table Drag and Drop JQuery plugin
スポンサーリンク