У меня есть таблица, например:
<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-n-Drop, у меня есть 6- th
вместо 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
).
Как это исправить?
Каждый раз, когда вы начинаете перетащив его создает две новые th
элементы. один не отображается, поэтому он ничего не действует. Второй - это заполнитель для исходного элемента, когда вы его перетаскиваете. Ширина этого нового элемента не задана, поэтому он автоматически определяет ширину столбцов, которая, по-видимому, вызывает скачок.
Чтобы противостоять этому, я изменил ширину элемента-заполнителя на ширину элемента, который мы перетаскиваем в функцию запуска. Надеюсь это поможет
start: function(event, ui){
$(".ui-sortable-placeholder").css({width: $(ui.item).width()});
Ниже приведен код, и здесь моя скрипка
$(function () {
$('#mytable thead tr').sortable({
axis: "x",
helper: "clone",
start: function(event, ui){
$(".ui-sortable-placeholder").css({width: $(ui.item).width()});
}
}).disableSelection();
});