- ベストアンサー
tableのtr要素のドラッグ＆ドロップで任意の順番を取得したい方法
- jqueryのSortableプラグインを使用して、tableのtr要素をドラッグ＆ドロップで入れ替えることができます。
- rowspanで連結されている<tr>を複数行まとめて1つの要素として扱い、入れ替えることも可能です。
- <table>を入れ子にする方法もありますが、CSSの関係で難しい場合もあるため、別の方法を検討することをおすすめします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
Google Chromeでも出来た。しかし 何故か、Google Chrome Ver 7.0.517.41 だと、↓ しないと、 うまくいかない。謎だ！ case "dragend": if(dt.dropEffect=="move") var target_table = target.parentNode; //Chrome で変数に渡せないなぜだ！ var idx = target.rowIndex; //Chrome で変数に渡せないなぜだ！ if(this.rowspan==0){ target.parentNode.deleteRow(target.rowIndex); }else { for(var i=this.rowspan-1;i>=0;i--){ target.parentNode.deleteRow(target.rowIndex+i); } } return; それから、 dt.setData("text/html" ～ dt.getData("text/html" ～ じゃなくて、こおいった時は本来 dt.setData("text/plain" ～ dt.getData("text/plain" ～ か。 さらに、 arguments.callee(tr.nextElementSibling); は、関係無いところまで検査してしまっている。まあ、いいかっと。
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
とってつけたような強引な対応ですが、Rowspanに対応しました。 ※「Element.nextElementSibling」も使ったのでFirefox3.5以上です。 ※ 尚、ドロップ先がRowspanでまとめられてる場合は考慮してません。 ※例によって、全角空白は半角空白にしてね。 ※だれかが、もっといいやつを作ってくれるかもしれない。 function dragtable(table){ ---前と同じなので省略--- ctx.stroke(); this.rowspan = 0; this.handleEvent = function(event){ var dt= event.dataTransfer; var target = event.target; switch (event.type){ case "dragstart": var trs = target.innerHTML; this.rowspan = 0; this.rowspanchk(target); if(this.rowspan > 0){ for(var i=0;i<this.rowspan-1;i++){ trs += "~" + target.nextElementSibling.innerHTML; } } dt.setData("text/html",trs); dt.setDragImage(canvas,13,13); dt.effectAllowed = "move"; return; case "dragover": if(target.nodeName == "TD" || target.nodeName == "TH") event.preventDefault(); return; case "drop": var trs = dt.getData("text/html").split("~"); var target_tr = target.parentNode; for(var i=trs.length;i>0;i--){ var tr = target_tr.parentNode.insertRow(target_tr.rowIndex); tr.innerHTML = trs[i-1]; tr.setAttribute("draggable","true"); target_tr.parentNode.insertBefore(tr,target_tr.nextElementSibling); } event.preventDefault(); return; case "dragend": if(dt.dropEffect=="move") var target_table = target.parentNode; var idx = target.rowIndex; if(this.rowspan==0) target_table.deleteRow(idx); else { for(var i=this.rowspan-1;i>=0;i--){ target_table.deleteRow(idx+i); } } return; } } } dragtable.prototype.rowspanchk = function(tr){ var td = tr.childNodes; var rowspan = []; for(var i=0;i<td.length;i++){ if(td[i].getAttribute("rowspan") > 0) rowspan.push(td[i].getAttribute("rowspan")); } rowspan.sort(); if(rowspan[0]){ this.rowspan += rowspan[0]; arguments.callee(tr.nextElementSibling); } } myDragTable = new dragtable(document.getElementById("dragtable"));
- yyr446
- ベストアンサー率65% (870/1330)
こんなんで、（Firefox 3.1 以上） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table id="dragtable" border="1" style="margin:10px auto 10px;"><tbody> <tr><th>A</th><th>B</th><th>C</th></tr> <tr draggable="true"><td>a</td><td>b</td><td>c</td></tr> <tr draggable="true"><td>あ</td><td>い</td><td>う</td></tr> <tr draggable="true"><td rowspan="2">１</td><td>２</td><td>３</td></tr> <tr draggable="true"><td>ろ</td><td>は</td></tr> <tr draggable="true"><td>x</td><td>y</td><td>z</td></tr> <tr draggable="true"><td>X</td><td>Y</td><td>Z</td></tr> </tbody></table> <script type="text/javascript"> function dragtable(table){ this.table = table; table.addEventListener("dragstart",this,false); table.addEventListener("dragover",this,false); table.addEventListener("drop",this,false); table.addEventListener("dragend",this,false); var canvas = document.createElement("canvas"); canvas.width = canvas.height = 26; var ctx = canvas.getContext("2d"); ctx.lineWidth = 2; ctx.moveTo(0,0),ctx.lineTo(26,13),ctx.moveTo(0,26),ctx.lineTo(26,13); ctx.stroke(); this.handleEvent = function(event){ var dt= event.dataTransfer; var target = event.target; switch (event.type){ case "dragstart": dt.setData("application/x-moz-node",event.target); dt.setData("text/html",event.target.innerHTML); dt.setDragImage(canvas,13,13); dt.effectAllowed = "move"; return; case "dragover": if(target.nodeName == "TD") event.preventDefault(); return; case "drop": var target_tr = target.parentNode; var tr = target_tr.parentNode.insertRow(target_tr.rowIndex); tr.innerHTML = dt.getData("text/html"); tr.setAttribute("draggable","true"); event.preventDefault(); return; case "dragend": if(dt.dropEffect=="move") target.parentNode.deleteRow(target.rowIndex); return; } } } myDragTable = new dragtable(document.getElementById("dragtable")); </script> </body> </html> Rowspan対応も出来そう(まとめて移動すればよいのか)だが．．．． 続く．．．．（続かないかも）
お礼
yyr446様 すばらしいです！！ ありがとうございました。 勉強させていただきました。