jqueryのsortableで行き来自由に

2023/09/04 20:21

このQ&Aのポイント

jqueryのsortableを使用して要素を自由に移動する方法について教えてください。
sortableのconnectWithを使用すると、要素を別のエリアに移動することができますが、もとの場所に戻すことができなくなる問題があります。
この問題を解決するための対策方法を教えてください。

ベストアンサー

jqueryのsortableで行き来自由に

2013/05/20 20:37

お世話になります jqueryのsortableでconnectWithを使うことで別のエリアにソートが可能になりますがすべての要素を別の要素に移動した場合もとの場所に戻すことが不可能になってしまいますこれを可能にするにはどうしたらいいのでしょうか例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable">  <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアA（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table>   <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアB（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table>  </div> </body> </html> 対策方法御存知の方お助け下さいませ！

susan-styl
お礼率86% (181/210)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kool_noah
ベストアンサー率33% (95/285)

2013/05/22 12:15 回答No.1

確認したところ、Chromeではそのような現象は確認できませんでした。 IE、FireFoxでは確かに戻せないですね。根本的解決ではないかもしれませんが、すべてのtrtdがなくなると起きてしまっているようなので、ダミーのtrtdを用意しておくというのも方法の一つなのかなと。 <tr><td style="display: none;"></td></tr>をエリアAとエリアBの一番下に配置しておくとか。それによる弊害も出るかもしれません（レイアウトが崩れるとか、予期しない動作をしたとか）あくまで手段の一つとして。

質問者

お礼 2013/05/22 20:32

kool_noah様ご回答ありがとうございます！これはjqueryのバグなのか、そもそもtableでconnectWithすることが非推奨なのかお教えいただいたとおり、ダミーを入れてcancelで動かないようにしました！ご回答ありがとうございます！

関連するQ&A

マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて以下のようにCSSとHTMLを書いてみました。しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
javascriptでちゃんと表示されない。
javascriptの参考書通りに書いてるのになぜか出ません。なぜか、新製品と価額だけしかでません。リラックスチェアとか価額４０００とかが出ません。何が原因かわかりません。何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
jqueryでどうやってエスケープ？
<table border> <tbody> <tr><th>名前</th><th>学年</th><th>評価</th></tr> <tr><td>山田</td><td>１年</td><td>A</td></tr> <!-- ここにエスケープしてappendしていきたい。 --!> </tbody> </table> はじめまして。上記のようなテーブルがあり、ここに新しく <tr><td>鈴木</td><td>2年</td><td>B</td></tr>をエスケープしてjqueryで追加していきたい場合、一般的にどのように書けば良いのでしょうか？エスケープせず追加するのなら、 $("table").append("<tr><td>鈴木</td><td>2年</td><td>B</td></tr>"); と書けば良いかと思いますが、エスケープしながら追加していく方法がわかりません。わかる方、宜しくお願い致します。
- ベストアンサー
- JavaScript
マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。テーブルを作成してマウスオーバーしている行のバックカラーを変えるプログラムを作成しています。ですが、rowspanを使用すると、rowspanが別の行扱いになり、バックカラーが変えられなくなってしまいました。一緒にしたい場合どうしたら良いでしょうか。もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
文字色を変更するCSSが効かない
テーブルのヘッダ部分の文字色を変更したくて下記CSSとHTMLを記述したのですが文字色を変更するcolorが効かなくて困っています。背景色は変更されるのでbackgroudは効いています。原因はお分かりになりますでしょうか。【CSS】 table thead tr td { clolor:red; background:black; } 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="test2.css" type="text/css"> <script> </script> </head> <body> <table> <thead> <tr> <td>名前</td> <td>金額</td> </tr> </thead> <tbody> <tr class="odd"> <td>abc</td> <td>3000</td> </tr> <tr class="even"> <td>xyz</td> <td>100</td> </tr> <tr class="odd"> <td>myk</td> <td>20000</td> <tr class="even"> <td>xyz</td> <td>100</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
idをつけてるtdタグの値をjQueryで
初めて質問させていただきます。下記のようなテーブルがあった場合、<td id="ID">1234</td>の「1234」をjQueryで取得したいのですが、うまくいきません。ご教授お願いいたします。テーブルの例 <table id="nameTable"> <thead> <tr> <th>aaa</th> </tr> <tr> <td id="ID">1234</td> </tr> </thead> </table> 記述したjQuery $('table.nameTable td.ID').text();
- 締切済み
- JavaScript
セルの幅について
htmlで指定した幅と開発者ツールで確認した実際の幅、JQUERYで取得できる幅それぞれ違うのはなぜでしょうか。具体的なｈｔｍｌは以下のようなものです。 table-layout: fixedは都合により使う事ができません。 <script src="./jquery.js" type="text/javascript"></script> <table border="1"> <colgroup> <col width="10"> <col width="20"> <col width="30"> </colgroup> <thead> </thead> <tbody> <tr> <td class="a">a</td> <td class="b">b</td> <td class="c">c</td> </tr> </tbody> </table> <script type="text/javascript"> alert($('.a').width()); </script> 開発者ツールで確認すると左から14　24　34の幅になります。また、jqueryでセルの幅をwidth()で取得すると 12 22 32となります。指定使用しているブラウザはIE8 / IE6です。
- 締切済み
- HTML
jQuery、tdマウスオーバー、行の先頭th操作
jQueryについて質問です。 <!DOCTYPE html><html><head> <style type="text/css"> th.e {background-color:orange;} </style> </head><body> <table border='1' cellspacing='0'> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("table td").mouseover(function(){ $(this).parent().find("th").toggleClass("e"); }).mouseout(function(){ $(this).parent().find("th").toggleClass("e"); }); </script> </body></html> 上記で動いて嬉しかったのですが、もやもやしています。 this → parent → find が遠回りでスカッとしません。スカッとする方法はありますか？
- 締切済み
- JavaScript
jQueryで行の移動
ｊQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。 <table id = "table_test"> <tbody id = "test1"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button1" value="テスト1"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test2"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button2" value="テスト2"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test3"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button3" value="テスト3"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> </table> 処理としては、button1を押下したら、<tbody id = "test1">～</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。 trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。 tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか？どなたかご教授お願い致します。
- ベストアンサー
- JavaScript