今日の人気記事

  1. ボックスからはみ出たテキストをドットに変換「dotdotdot」
  2. 同じ内容の入力フォームを追加・削除「Repeater」
  3. 入力フォームのフォーカスを自動でタブ移動「Autotab」
  4. 3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」
  5. アンカータグに確認やポップアップ効果を追加「A+」

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

スポンサーリンク

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