jquery-ui sortable：如何在拖動時添加單元格？

Question

我有一些表，例如：

<table class="table table-hover table-striped" id="mytable"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Table heading 1</th> 
     <th>Table heading 2</th> 
     <th>Table heading 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
     <td>Table cell</td> 
    </tr> 
    </tbody> 
</table> 

然後我要讓排序表中的行頭。

$('#mytable thead tr').sortable({ 
    axis: "x", 
    helper: "clone" 
}).disableSelection(); 

問題：

當我開始將正掉落，我有6 th -s代替4-：

<tr class="ui-sortable"> 
    <th>#</th> 
    <th style=" 
     display: none;">Table heading 1</th> 
    <th class="ui-sortable-placeholder" 
     style=" 
      visibility: hidden;"></th> 
    <th>Table heading 2</th> 
    <th>Table heading 3</th> 
    <th style=" 
      display: table-cell; 
      width: 343px; 
      height: 37px; 
      position: absolute; 
      z-index: 1000; 
      left: 184px;" 
     class="ui-sortable-helper">Table heading 1</th> 
</tr> 

..和所有的加價開始非常不穩定並且不確定：當我將th項目拖動到表格上時，我看到所有行都跳起來了。

很明顯，這是因爲計數th項（它不等於tr中的td項數）。

如何修復？

Answer 1

每次開始拖動時，都會創建兩個新的th元素。一個不顯示，所以它似乎沒有影響任何東西。第二個是原始元素的佔位符，當您拖動它時。這個新元素的寬度沒有設置，所以它會自動調整到最大寬度，這似乎是導致它跳躍的原因。

爲了解決這個問題，我將佔位符元素的寬度更改爲我們在start函數中拖動的元素的寬度。希望這有助於

start: function(event, ui){ 
    $(".ui-sortable-placeholder").css({width: $(ui.item).width()}); 

下面是代碼，這裏是我的fiddle

$(function() { 
$('#mytable thead tr').sortable({ 
    axis: "x", 
    helper: "clone", 
    start: function(event, ui){ 
     $(".ui-sortable-placeholder").css({width: $(ui.item).width()});  
    } 
}).disableSelection(); 
});