今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. フローチャートを作成「Flow Chart」
  3. グラフにマウス操作で動かせる目盛りを実装「2D Slider and Range」
  4. シンプルなレスポンシブ・トップメニュー「PrMenu」
  5. タイプライターのようにテキストを1文字ずつ表示「typist」

Tableの行がドラッグアンドドロップできる「Table Drag and Drop」

スポンサーリンク

Tableの行がドラッグアンドドロップできるjQueryプラグイン「Table Drag and Drop」を紹介します。

jQueryプラグイン「Table Drag and Drop」

Table Drag and Dropは、ドラッグアンドドロップでTable行の入れ替えを実現するjQueryプラグインです。

スポンサーリンク

実際にデモでドラッグアンドドロップをやってみてください。すっげーよー!

「Table Drag and Drop」のデモ

デモのソース(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

スポンサーリンク

関連記事(一部広告含む)