HTML錶行跨度重新排序項拖放問題

Question

我的HTML代碼

<table border='1px' id='sort'> 
    <thead> 
     <tr> 
      <th>SL</th> 
      <th>Sub Group</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td rowspan='3'>1</td> 
      <td rowspan='3'>Fruit</td> 
      <td>Mango</td> 
     </tr> 
     <tr> 
      <td>Orange</td> 
     </tr> 
     <tr> 
      <td>pineapple</td> 
     </tr> 
     <tr> 
      <td rowspan='2'>2</td> 
      <td rowspan='2'>Flower</td> 
      <td>Rose</td> 
     </tr> 
     <tr> 
      <td>sunflower</td> 
     </tr> 
    </tbody> 
</table> 

和js

var fixHelperModified = function(e, tr) { 
    var $originals = tr.children(); 
    var $helper = tr.clone(); 
    $helper.children().each(function(index) { 
     $(this).width($originals.eq(index).width()) 
    }); 
    return $helper; 
}, 
    updateIndex = function(e, ui) { 
     $('td.index', ui.item.parent()).each(function (i) { 
      $(this).html(i + 1); 
     }); 
    }; 

$("#sort tbody").sortable({ 
    helper: fixHelperModified, 
    stop: updateIndex 
}).disableSelection(); 

我只想重新排序亞羣，如水果芒果，橙子或向日葵，玫瑰不表中的主要組。 工作小提琴是http://jsfiddle.net/p6c814o6/。如何解決這個問題。謝謝。

Answer 1

試試這個：

我已經更新了你的提琴JsFiddle。根據你的代碼，你的html是錯誤的。你必須檢查你的新的HTML。 而不是使用rowspans你必須去嵌套表來實現它。

<table border='1px' id='sort'> 
    <thead> 
     <tr> 
      <th>SL</th> 
      <th>Sub Group</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td >1</td> 
      <td >Fruit</td> 
      <td><table> 
       <tr> 
      <td>Mango</td> 
     </tr> 
       <tr> 
      <td>Orange</td> 
     </tr> 
     <tr> 
      <td>pineapple</td> 
     </tr></td> 
     </tr> 
     </table> 
     <tr> 
      <td >2</td> 
      <td >Flower</td> 
      <td><table> 
       <tr> 
        <td> 
       Rose 
        </td> 
       </tr> 
      <tr> 
      <td>sunflower</td> 
     </tr> 
       </table> 
      </td> 

    </tbody> 
</table> 

查看更新的小提琴。如果這是你需要的。 希望這可以幫助JsFiddleUpdated