PHP & JavaScript Room :: 設置サンプル

実行結果

Table Drag and Drop JQuery plugin | 設置サンプル

▼テーブルの行全体をドラッグ＆ドロップして入れ替えられます。

例1：デフォルト

1Onesome text
2Twosome text
3Threesome text
4Foursome text
5Fivesome text
6Sixsome text

例2：

 
1One
2Two
3Three
4Four
5Five
6Six
7Seven
8Eight
9Nine
10Ten
11Eleven
12Twelve
13Thirteen
14Fourteen

例3：行の並び順を取得

Ajax result

ドラッグ&ドロップ後のtr要素の並び順を取得して表示します。

1One
2Two
3Three (この行はドラッグできません)
4Four
5Five (この行の上にはドロップできません)
6Six

例4：複数のtbody要素

H1H2H3
4.1One
4.2Two
4.3Three
4.4Four
4.5Five
4.6Six
H1H2H3
5.1One
5.2Two
5.3Three
5.4Four
5.5Five
5.6Six
H1H2H3
6.1One
6.2Two
6.3Three
6.4Four
6.5Five
6.6Six

例5：矢印付き

 1Onesome text
 2Twosome text
 3Threesome text
 4Foursome text
 5Fivesome text
 6Sixsome text

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>Table Drag and Drop JQuery plugin | 設置サンプル</title>
      <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.tablednd_0_5.js"></script>
      <script type="text/javascript">
         $(function() {
            /*************** 例1 */
            $("#table-1").tableDnD(); /* 初期化 */
            /*************** 例2 */
            $("#table-2 tr:even").addClass("alt"); /* ストライプ効果 */
            /* dragClassクラスとアラート表示するonDrop関数を指定 */
            $("#table-2").tableDnD({
                onDragClass: "myDragClass",
                onDrop: function(table, row) {
                     var rows = table.tBodies[0].rows;
                     var debugStr = ""+row.id+"がドラッグ&ドロップされました。現在の並び順は「";
                     for (var i=0; i<rows.length; i++) {
                         debugStr += rows[i].id+" ";
                     }
                     debugStr+="」です。";
                    $("#debugArea").html(debugStr);
                },
               onDragStart: function(table, row) {
                  $("#debugArea").html("ドラッグが開始された行："+row.id);
               }
            });
            /*************** 例3 */
            $('#table-3').tableDnD({
                onDrop: function(table, row) {
                    alert("Result of $.tableDnD.serialise() is "+$.tableDnD.serialize());
                   $('#AjaxResult').load("/module/include/ajax/jquery_plugin_tablesort/ajaxTest.php?"+$.tableDnD.serialize());
                 }
            }); 
            /*************** 例4 */
            $('#table-4').tableDnD();
            /*************** 例5 */
            $('#table-5').tableDnD({
                 onDrop: function(table, row) {
                     alert($('#table-5').tableDnDSerialize());
                 },
                 dragHandle: "dragHandle"
             });
             $("#table-5 tr").hover(function() {
                   $(this.cells[0]).addClass('showDragHandle');
             }, function() {
                   $(this.cells[0]).removeClass('showDragHandle');
             });
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         .demo { background-color:#fff; border:1px solid #666699; margin-right:10px; padding:6px; width:700px; }
         .demo table { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; }
         .demo th,
         .demo td { border:1px solid #ccc; background-color:#fff; padding:3px; }
         .alt td { background-color:#ecf6fc;} /* for 例2 */
         td.showDragHandle { background:transparent url(/content/img/icon/color/arrow_next.gif) no-repeat center center; cursor:move; } /* for 例5 */
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/'>Table Drag and Drop JQuery plugin</a> | 設置サンプル</h1>
         <p>▼テーブルの行全体をドラッグ＆ドロップして入れ替えられます。</p>
<!-- CODE -->
<h2>例1：デフォルト</h2>
<div class="demo">
   <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>

<h2>例2：</h2>
<div id="debugArea">&nbsp;</div>
<div class="demo">
   <table id="table-2" cellspacing="0" cellpadding="2">
      <tr id="2.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
      <tr id="2.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
      <tr id="2.3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
      <tr id="2.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
      <tr id="2.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
      <tr id="2.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
      <tr id="2.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="7"/></td></tr>
      <tr id="2.8"><td>8</td><td>Eight</td><td><input type="text" name="eight" value="8"/></td></tr>
      <tr id="2.9"><td>9</td><td>Nine</td><td><input type="text" name="nine" value="9"/></td></tr>
      <tr id="2.10"><td>10</td><td>Ten</td><td><input type="text" name="ten" value="10"/></td></tr>
      <tr id="2.11"><td>11</td><td>Eleven</td><td><input type="text" name="eleven" value="11"/></td></tr>
      <tr id="2.12"><td>12</td><td>Twelve</td><td><input type="text" name="twelve" value="12"/></td></tr>
      <tr id="2.13"><td>13</td><td>Thirteen</td><td><input type="text" name="thirteen" value="13"/></td></tr>
      <tr id="2.14"><td>14</td><td>Fourteen</td><td><input type="text" name="fourteen" value="14"/></td></tr>
   </table>
</div>

<h2>例3：行の並び順を取得</h2>
<div class="demo">
   <div id="AjaxResult" style="float: right; width: 250px; border: 1px solid silver; padding: 4px; font-size: 90%">
      <h3>Ajax result</h3>
      <p>ドラッグ&ドロップ後のtr要素の並び順を取得して表示します。</p>
   </div>
   <table id="table-3" cellspacing="0" cellpadding="2">
      <tr id="3.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
      <tr id="3.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
      <tr id="3.3" class="nodrop"><td>3</td><td>Three (この行はドラッグできません)</td><td><input type="text" name="three" value="three"/></td></tr>
      <tr id="3.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
      <tr id="3.5" class="nodrag"><td>5</td><td>Five (この行の上にはドロップできません)</td><td><input type="text" name="five" value="five"/></td></tr>
      <tr id="3.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
   </table>
</div>

<h2>例4：複数のtbody要素</h2>
<div class="demo">
   <table id="table-4" cellspacing="0" cellpadding="2">
      <tbody>
         <tr id="4.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
         <tr id="4.1"><td>4.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
         <tr id="4.2"><td>4.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
         <tr id="4.3"><td>4.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
         <tr id="4.4"><td>4.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
         <tr id="4.5"><td>4.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
         <tr id="4.6"><td>4.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
      </tbody>
      <tbody>
         <tr id="5.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
         <tr id="5.1"><td>5.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
         <tr id="5.2"><td>5.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
         <tr id="5.3"><td>5.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
         <tr id="5.4"><td>5.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
         <tr id="5.5"><td>5.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
         <tr id="5.6"><td>5.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
      </tbody>
      <tbody>
         <tr id="6.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
         <tr id="6.1"><td>6.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
         <tr id="6.2"><td>6.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
         <tr id="6.3"><td>6.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
         <tr id="6.4"><td>6.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
         <tr id="6.5"><td>6.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
         <tr id="6.6"><td>6.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
      </tbody>
   </table>
</div>

<h2>例5：矢印付き</h2>
<div class="demo">
   <table id="table-5" cellspacing="0" cellpadding="2">
      <tr id="table5-row-1"><td class="dragHandle">&nbsp;</td><td>1</td><td>One</td><td>some text</td></tr>
      <tr id="table5-row-2"><td class="dragHandle">&nbsp;</td><td>2</td><td>Two</td><td>some text</td></tr>
      <tr id="table5-row-3"><td class="dragHandle">&nbsp;</td><td>3</td><td>Three</td><td>some text</td></tr>
      <tr id="table5-row-4"><td class="dragHandle">&nbsp;</td><td>4</td><td>Four</td><td>some text</td></tr>
      <tr id="table5-row-5"><td class="dragHandle">&nbsp;</td><td>5</td><td>Five</td><td>some text</td></tr>
      <tr id="table5-row-6"><td class="dragHandle">&nbsp;</td><td>6</td><td>Six</td><td>some text</td></tr>
   </table>
</div>
<!-- CODE / -->
      </div>
   </body>
</html>