Сортируемый jquery-ui: как не добавлять ячейки при перетаскивании?

0

У меня есть таблица, например:

<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).

Как это исправить?

  • 0
    эта библиотека делает именно это: danvk.org/wp/dragtable
Теги:
html-table
jquery-ui-sortable

1 ответ

1
Лучший ответ

Каждый раз, когда вы начинаете перетащив его создает две новые 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();
});
  • 0
    Это делает жизнь лучше. Но все еще не решение: похоже, что width () выполняется после подбора элемента, а ширина заполнителя зависит от ширины содержимого строки tbody. Например, первый ряд становится очень маленьким. Кстати, ваша ссылка на jsfiddle ссылается на страницу без какого-либо кода.
  • 0
    Извините, только что обновил мою скриптовую ссылку.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню