jquery.tablednd.jsを使ってtableタグの行(順番)をドラッグ&ドロップで変更する方法をご紹介します。
Contents
tableタグの行(順番)をドラッグ&ドロップで変更するCSSの記述
※tableタグ(#table-1)のCSSです。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ text-align: center; font-size: 16px; } h1{ text-align: center; padding: 10px 0 0 0; font-size: 18px; font-weight: bold; } #table-1{ width: 260px; margin: 0 auto; border-top:solid 1px #cccccc; border-left:solid 1px #cccccc; border-right:solid 1px #cccccc; } #table-1 tr:hover{ background-color: #cccccc; } #table-1 td{ padding: 4px 0; border-bottom:solid 1px #cccccc; } --> </style>
jquery.tablednd.jsを使ってtableタグの行(順番)をドラッグ&ドロップで変更するJavaScriptの記述
※jquery.min.js、jquery.tablednd.jsファイルを読み込みます。
$(“行を変更するテーブルタグ”).tableDnD()で指定されたテーブルタグの行(順番)がドラッグ&ドロップで変更できます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.tablednd.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#table-1").tableDnD(); }); </script>
tableタグの行(順番)をドラッグ&ドロップで変更するHTMLの記述
※行(順番)をドラッグ&ドロップで変更するtableタグ(id=”table-1″)を用意しました。必要に応じて変更して下さい。
<h1>tableタグの行(順番)をドラッグ&ドロップで変更できます</h1> <table id="table-1" cellspacing="0" cellpadding="2" > <tr id="1"><td>1</td><td>One</td><td>テキスト</td></tr> <tr id="2"><td>2</td><td>Two</td><td>テキスト</td></tr> <tr id="3"><td>3</td><td>Three</td><td>テキスト</td></tr> <tr id="4"><td>4</td><td>Four</td><td>テキスト</td></tr> <tr id="5"><td>5</td><td>Five</td><td>テキスト</td></tr> <tr id="6"><td>6</td><td>Six</td><td>テキスト</td></tr> </table>
tableタグの行(順番)をドラッグ&ドロップで変更するデモページ
tableタグの行(順番)をドラッグ&ドロップで変更するデモページ
ソース元:Table Drag and Drop JQuery plugin
以下がソース元サイトです。
Table Drag and Drop JQuery plugin
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告