質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

6400閲覧

[JQuery Sortable]2つの表の行の入れ替えを行いたい。しかし表の行数が0になると追加できなくなってしまう。

AkikoS

総合スコア11

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/03/02 06:00

###前提・実現したいこと
JQueryのSortableを使用して、
二つの表の行の移動を行いたいと思っています。

下記コードである程度実現はできたのですが、
片方の表の行数が0(theadを除く)になった場合に、その表への行移動ができなくなってしまいます。

できるようにするには、どうしたら良いかご助言を頂きたいです。
###該当のソースコード

HTML

1<head> 2<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 3<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 4<script> 5 $( function() { 6 $( "#sortable1 tbody, #sortable2 tbody" ).sortable({ 7 connectWith: ".connectedSortable" 8 }).disableSelection(); 9 }); 10</script> 11</head> 12<body> 13チームA 14<table id="sortable1" > 15 <thead> 16 <tr><th>a</th><th>b</th><th>c</th></tr> 17 </thead> 18 <tbody class="connectedSortable"> 19 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr> 20 <tr><td>Item 4</td><td>Item 5</td><td>Item 6</td></tr> 21 </tbody> 22</table> 23チームB 24<table id="sortable2"> 25 <thead> 26 <tr><th>a</th><th>b</th><th>c</th></tr> 27 </thead> 28 <tbody class="connectedSortable"> 29 <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr> 30 <tr><td>Item 4</td><td>Item 5</td><td>Item 6</td></tr> 31 </tbody> 32</table> 33</body> 34

###試したこと
下記のようにdropOnEmptyをtrueにしても変わりませんでした。

$( "#sortable1 tbody, #sortable2 tbody" ).sortable({
connectWith: ".connectedSortable",
dropOnEmpty: true

}).disableSelection();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

完全に書いてしまうと勉強にならないので、なぜ移動できないかを簡単に説明します。

<tbody class="connectedSortable"> <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr> <tr><td>Item 4</td><td>Item 5</td><td>Item 6</td></tr> </tbody>

すべて移動させてしまうと

<tbody class="connectedSortable"> </tbody>

という状態になってしまいます。

実は下記のテーブル行のエリアにドラッグすることで移動ができていたのですが、

<tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>

なくなってしまうと、もうどうしょうもできなくなってしまうわけです。
なので、

<tbody class="connectedSortable"> <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr> <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr> <tr><td>Item 4</td><td>Item 5</td><td>Item 6</td></tr> </tbody>

と追加してみると(適当なのですごく小さくなりますので調整が必要です。)
データがある行だけを移動しても一行残っているので、移動が可能になります。

要するに、行移動するための別のテーブルに移動不可能な一行を追加すれば良いというわけです。

こちらに詳しく、Sortableについてサンプル付で乗っているので、ご確認ください。
Sortable

投稿2017/03/02 06:39

raichi

総合スコア278

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AkikoS

2017/03/02 07:22

ご回答ありがとうございます! なるほど、Sortableのオプションで解決ではなく、 自前で細工が必要なわけですね。 下記のやり方で解決しました! 違和感がありましたらご指摘いただけると助かります。 1.各テーブルのtrの初めにダミーとして下記の行を追加 <tr class="ui-state-disabled"></tr> 2.$( "#sortable1 tbody, #sortable2 tbody" ).sortableに下記を追加 items: "tr:not(.ui-state-disabled)" ありがとうございました^^
raichi

2017/03/03 05:24

動き的には問題はないと思います。 すべての項目がなくなって、テーブルがくしゃっと小さくなってしまうのが嫌なら、 <table id="sortable1" width="210px"> みたくテーブル幅を固定すると良いかもしれません。 頑張ってください!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問