jQuery UI Sortable и Table/Cell Size

Question

У меня возникли проблемы с использованием jQuery UI's sortable.

У меня есть таблица, в которой строки следуют этой структуры:

<tr style="background-color: rgb(255, 192, 203);"> 
    <input type="hidden" name="MyElement.index" autocomplete="off" value="748d4196-c12d-4c61-94f5-ad1a15eb279b"> 
    <td style="background-color:red;"> 
     <input type="hidden" id="MyElement_748d4196-c12d-4c61-94f5-ad1a15eb279b__ID" name="MyElement[748d4196-c12d-4c61-94f5-ad1a15eb279b].ID" /> 
     <input type="hidden" ... /> 
     <a href="..."> ... </a> 
    </td> 
    <td style="background-color:green;"> 
     <a href="..."> ... </a> 
    </td> 
    <td style="text-align: right; vertical-align: middle; width: 12.5%; background-color: blue"> 
     <a class="cancel-new-element" href="#" onclick="$(this).parent().parent().remove(); return false;" style="vertical-align: middle; margin-right: 15px;"> 
      <img src="/Images/icon_remove.png" alt="Remove Row"></a> 
    </td> 
</tr> 

Первый скрыт input (названный «MyElement.index») происходит от метода Html.BeginCollectionItem() расширения, используемого для поддержки редактирования переменной длины список, подход, который я использовал несколько раз раньше и который можно увидеть here или here. В основном он добавляет префикс к именам и идентификаторам входов повторяющихся элементов (т. Е. Элементов в коллекции) в модели/viewmodel, поэтому привязка модели знает, какой вход принадлежит к вложенному объекту.

Я также настройки пользовательского помощника в моем jQuery UI sortable:

var myHelper = function (e, tr) { 
    var $originals = tr.children(); 
    var $helper = tr.clone(); 
    $helper.children().each(function (index) { 
     $(this).width($originals.eq(index).width()) 
    }); 
    return $helper; 
}; 

, так что the td's in the row being dragged keep their widths.

Однако я не получаю желаемого эффекта, и вместо этого, когда я перетаскиваю строку, таблица немного сжимается, и я вижу, что ячейки перетаскиваемой строки на самом деле не сохраняют их точной ширины.

1) Это таблица (тр и фоны ТД были окрашены для лучшей визуализации):

2) В последней строке затягивается. Вы можете видеть, что размер таблицы уменьшается, а ширина td изменяется в перетаскиваемой строке. Розовый - это фон строки.

Если я не использую BeginCollectionItem - что мне нужно для того, чтобы успешно опубликовать мой ViewModel - я не получаю один и тот же вопрос.

Я пробовал несколько модификаций на моей myHelper функции. включая удаление скрытого input с объекта $helper без каких-либо результатов.

Answer 1

Нашли мое решение здесь: jquery UI Sortable with table and tr width (ответ Кита).

// Fix the width of the cells 
$('td, th', '#tableId').each(function() { 
    var cell = $(this); 
    cell.width(cell.width()); 
}); 

$('#tableBodyId').sortable({ 
    items: '> tr', 
    forcePlaceholderSize: true, 
    start: function (event, ui) { 
     // Build a placeholder cell that spans all the cells in the row 
     var cellCount = 0; 
     $('td, th', ui.helper).each(function() { 
      // For each td or th try and get it's colspan attribute, and add that or 1 to the total 
      var colspan = 1; 
      var colspanAttr = $(this).attr('colspan'); 
      if (colspanAttr > 1) { 
       colspan = colspanAttr; 
      } 
      cellCount += colspan; 
     }); 

     // Add the placeholder UI - note that this is the item's content, so td rather than tr 
     ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>'); 
    } 
}).disableSelection(); 

(JS Fiddle here)

Кроме того, всякий раз, когда я изменить таблицу (например, добавление новых строк ...) Я ясно, что ширина устанавливается как так

// Clear the fixed widths: 
$('td, th', '#sortFixed').each(function() { 
    var cell = $(this); 
    cell.css('width',''); 
}); 

, а затем повторно зафиксируйте ширину.

Кредит составляет @Keith, для первоначального ответа.