【JQuery】sortableにて縦結合行を含むテーブルの並び替えおよび置換方法

Question

前提・実現したいこと

JQueryのsortableを使って、テーブル間をドラッグ＆ドロップでソートしたいです。

実現したいこととしては、縦結合を含むテーブルで//A行、//B行を同時に動かしたいのですが、Aのみがソートされ上手くいきません。
原因はテーブル間のソートではtr単位で判定して動いているからなのでしょうが、
JQueryの方に何かを追記してABともに動くコードにしたいです。

該当のソースコード

  $(function(){
		$('#sample tbody').sortable().disableSelection();




//html

<table id="sample">
  <tbody>
  <tr>
    <td rowspan="2">１行目</td>       //A
    <td>１行目２列目</td>
    <td>１行目３列目</td>
    <td>１行目４列目</td>
  </tr>
      <tr>                           //B   ・・・AB同時にソートさせたいがAのみソートされる
        <td>１'行目２列目</td>
        <td>１'行目３列目</td>
        <td>１'行目４列目</td>
      </tr>
  <tr>
    <td rowspan="2">２行目</td>
    <td>２行目２列目</td>
    <td>２行目３列目</td> 
    <td>２行目４列目</td>
  </tr>
      <tr>
        <td>２'行目２列目</td>
        <td>２'行目３列目</td>
        <td>２'行目４列目</td>
      </tr>
  </tbody>
</table>

試したこと

テーブルの中でdivで括ったりしてみたのですが、当然テーブル内にdivは使えないため、上手くいきませんでした。
ご教授よろしくお願いいたします。

Comments

[x_x]

jQuery UIのことであれば、「jQuery UI」タグをつけてください

[yuya1191994]

追加いたしました。　初質問にて至らない点があり申し訳ございません。

[退会済みユーザー]

tdの中にtrを書くのってだめくないですか？テーブルにしてみては？

[yuya1191994]

すみません、記述ミスです。変更しました。　htmlの記述ミスの類の現象ではありません。

Answer 1

rowspanを使ったtableの並び替えは対応していない場合がほとんどです。
jQuery UIのSotableも start, update, stop オプションを書けば対応できるでしょうが大変です。
ここはtbodyを複数使うのはどうでしょうか？
それを考慮して修正してみます。

<table id="sample">
  <tbody>
    <tr>
      <td>１行目１列目</td>              <!--//A-->
      <td rowspan="2">１行目２列目</td>
      <td>１行目３列目</td>
      <td>１行目４列目</td>
    </tr>
    <tr>                            <!--//B   ・・・AB同時にソートさせたいがAのみソートされる-->
      <td>１'行目１列目</td>
      <td>１'行目３列目</td>
      <td>１'行目４列目</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>２行目１列目</td>
      <td rowspan="2">２行目２列目</td>
      <td>２行目３列目</td> 
      <td>２行目４列目</td>
    </tr>
    <tr>
      <td>２'行目１列目</td>
      <td>２'行目３列目</td>
      <td>２'行目４列目</td>
    </tr>
  </tbody>
</table>

    $(function(){
        $('#sample').sortable({
          axis: 'y'
        }).disableSelection();
    });

なお、disableSelection()は非推奨となっています。
https://api.jqueryui.com/disableSelection/

Comments

[x_x]

すみません、SotableはSortableの誤記です

[yuya1191994]

ご回答ありがとうございます。
tbodyの複数配置はやってみていたのですが、そうしますと各tbodyタグのtr間でしかソートできなくなってしまいます。

非推奨APIのご指摘ありがとうございます。

[x_x]

そうしたいという意図があったと思ったのですが、違うのでしょうか？

[yuya1191994]

齟齬を発生させてしまい申し訳ございません。
ご指摘いただきましたソースでいいますと、

<table id="sample">
<tbody>　　　　<!-- A ここから -->
<tr>
<td>１行目１列目</td>
<td rowspan="2">１行目２列目</td>
<td>１行目３列目</td>
<td>１行目４列目</td>
</tr>
<tr>
<td>１'行目１列目</td>
<td>１'行目３列目</td>
<td>１'行目４列目</td>
</tr>　
</tbody>　　　　<!-- B ここまでを-->
<tbody>
<tr>
<td>２行目１列目</td>
<td rowspan="2">２行目２列目</td>
<td>２行目３列目</td>
<td>２行目４列目</td>
</tr>
<tr>
<td>２'行目１列目</td>
<td>２'行目３列目</td>
<td>２'行目４列目</td>
</tr>
</tbody>
<!-- C ここにソートさせたい -->
</table>

という意図での質問でした。

tbodyを複数配置しますと、ABをCの位置へ、ではなくAB間の順番を入れ替えることしかできなくなってしまいます。

[x_x]

わたしはスクリプトも回答していますが、そちらを確認したうえでの話ですか？

[yuya1191994]

スクリプト内のtbodyを除去するのを見落としていました。失礼しました。
お陰様で解決いたしました。ご丁寧な解説ありがとうございました。