jQuery UI Sortable 및 표/셀 크기

Question

jQuery UI의 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으로 볼 수 있습니다. 기본적으로 모델/뷰 모델에서 반복 항목 (즉, 콜렉션의 항목)의 입력 이름과 ID에 접두사를 추가하여 모델 바인딩이 어떤 입력이 어떤 중첩 된 객체에 속하는지 알 수 있도록합니다.

나는 또한 내 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)이 테이블 (TR과 TD의 배경이 더 나은 시각화를 위해 착색 된이) :

2) 마지막 행을 끌고있다. 드래그 된 행에서 테이블 크기가 감소하고 td의 너비가 변경되었음을 알 수 있습니다. 핑크는 행의 배경입니다.

BeginCollectionItem을 사용하지 않으면 ViewModel을 성공적으로 게시하기 위해 동일한 문제가 발생하지 않습니다.

내 myHelper 함수에서 여러 수정을 시도했습니다. 결과를 포함하지 않고 $helper 개체에서 input이라는 숨겨진 개체를 제거하는 작업도 포함됩니다.

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 바이올린은 here)

나는 테이블을 수정할 때마다 또한

, (예를 들면 ... 새 행을 추가) 나는 폭이 너무

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

후 재처럼를 분명하게 너비를 고정하십시오.

크레딧은 원래 대답은 @Keith입니다.