在jQueryUI的排序

Question

Fiddle Example

移動列，包括日，表之間的我有與第一被攝體細胞標題兩個示例性的表。

<table class='sort connect'> 
    <thead> 
     <tr> 
      <th class='ui-state-disabled'></th> 
      <th>Person 1</th> 
      <th>Person 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class='ui-state-disabled'>Age</td> 
      <td>18</td> 
      <td>23</td> 
     </tr> 
     <tr> 
      <td class='ui-state-disabled'>Job</td> 
      <td>Clerk</td> 
      <td>Policeman</td> 
     </tr> 
    </tbody> 
</table> 


<table class='sort connect'> 
    <thead> 
     <tr> 
      <th class='ui-state-disabled'></th> 
      <th>Person 3</th> 
      <th>Person 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class='ui-state-disabled'>Age</td> 
      <td>17</td> 
      <td>46</td> 
     </tr> 
     <tr> 
      <td class='ui-state-disabled'>Job</td> 
      <td>Student</td> 
      <td>Firefighter</td> 
     </tr> 
    </tbody> 
</table> 

我做的th和td不可排序，因爲他們是冠軍的第一個孩子。有沒有辦法將其他列一次一個（td:nth-child,th:nth-child）移動到另一個使用jQueryUI排序的表？ 如何在change或start事件中對整列進行排序？

這裏是我的預期輸出：

<table class='sort connect'> 
    <thead> 
     <tr> 
      <th class='ui-state-disabled'></th> 
      <th>Person 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class='ui-state-disabled'>Age</td> 
      <td>18</td> 
     </tr> 
     <tr> 
      <td class='ui-state-disabled'>Job</td> 
      <td>Clerk</td> 
     </tr> 
    </tbody> 
</table> 


<table class='sort connect'> 
    <thead> 
     <tr> 
      <th class='ui-state-disabled'></th> 
      <th>Person 3</th> 
      <th>Person 2</th> // sorted 
      <th>Person 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class='ui-state-disabled'>Age</td> 
      <td>17</td> 
      <td>23</td> //sorted 
      <td>46</td> 
     </tr> 
     <tr> 
      <td class='ui-state-disabled'>Job</td> 
      <td>Student</td> 
      <td>Policeman</td> //sorted 
      <td>Firefighter</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; 
}; 

$(function() { 
    $(".sort").sortable({ 
    change: function(event, ui) { 
     var see = ui.item.index(); 
      console.log(see); 
     $(this).find('td:nth-child(see),th:nth-child(see)') 
    }, 
    helper: fixHelperModified, 
    cancel: ".ui-state-disabled", 
    connectWith: ".connect" 
    }).disableSelection(); 
    }); 

Answer 1

什麼像this？

它是你問一個解決辦法，但它基本上是同樣的事情，剛修好的造型，空間等，只要你願意

HTML

<div class="sortableContainer sort connect"> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <td height="20px"></td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Age</td> 
       </tr> 
       <tr> 
        <td>Job</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <td>Person 1</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>18</td> 
       </tr> 
       <tr> 
        <td>Clerk</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <td>Person 2</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>23</td> 
       </tr> 
       <tr> 
        <td>Policeman</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<div class="sortableContainer sort connect"> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <td height="20px"></td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Age</td> 
       </tr> 
       <tr> 
        <td>Job</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <td>Person 3</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>17</td> 
       </tr> 
       <tr> 
        <td>Student</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <td>Person 4</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>46</td> 
       </tr> 
       <tr> 
        <td>Firefighter</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

CSS

td, th { 
    border:1px solid #222 
} 
.red { 
    background:red 
} 
.ui-state-disabled { 
    opacity:1 
} 
.sortableContainer>div { 
    display:inline-block; 
} 
table { 
    border-spacing:0px; 
    border-collapse:collapse; 
} 

JS

$(function() { 
    $(".sort").sortable({ 
     connectWith: ".connect" 
    }).disableSelection(); 
});