重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取

解決済

  • 質問者：maho_momo
  • 質問日時：
  • 回答数：3件

tableのtr要素をドラッグ＆ドロップで任意に入れ替え、その順番を取りたいです。
jqueryのSortableプラグインを調べ、これならできそうとプログラムを組み、
trの一行ごとならばできました。

やりたいことは、rowspanで連結されている<tr>を2行以上まとめて１つの要素とみなし、
入れ替えたいのですが、
jqueryのSortableでできますでしょうか？

<table>
<tr><td rowspan="2">一行目</td><td>あいう</td>
<tr><td>えお<td></tr>
<tr><td rowspan="2">二行目</td><td>かきく</td>
<tr><td>けこ<td></tr>
</table>

<table>を入れ子にすれば実現はできそうですが、
ちょっとCSSの関係もあり、その方法を採用するのは難しい気がしています。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： yyr446
  • 回答日時：

　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);
は、関係無いところまで検査してしまっている。まあ、いいかっと。
    • good
    • 0
    • 件
通報する
この回答へのお礼

yyr446様

すばらしいです！！
ありがとうございました。
勉強させていただきました。

通報する
お礼日時：2010/10/29 16:27

No.2

  • 回答者： yyr446
  • 回答日時：

とってつけたような強引な対応ですが、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"));
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

こんなんで、（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対応も出来そう(まとめて移動すればよいのか)だが．．．．
続く．．．．（続かないかも）
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報