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(); 

Проблема:

Когда я начинаю Drag-н-Drop, у меня есть 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 элементов (которые не равны числу td элементов в tr).

Как отремонтировать это?

Answer 1

Каждый раз, когда вы начинаете перетаскивание, создается два новых элемента th. один не отображается, поэтому он ничего не действует. Второй - это заполнитель для исходного элемента, когда вы его перетаскиваете. Ширина этого нового элемента не задана, поэтому он автоматически определяет ширину столбцов, которая, по-видимому, вызывает скачок.

Чтобы встретить это, я изменил ширину элемента-заполнителя на ширину элемента, который мы перетаскиваем в функцию запуска. Надеюсь, что это помогает

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(); 
});