jQueryUIでテーブル行を並べ替えると、ドラッグされながら縮小されます

Question

この問題は、並べ替え可能な関数でドラッグされている間に縮小されているので、長い間問題になっています。どんな答え？ （Q &A）

P.S.テーブル上でソート可能なすべてのテーブルを処理するには、ソートするテーブル行の周りにTBODYを使用し、TBODYを含むソート可能な関数を呼び出す必要があります。

Answer 1

あなたがする必要があることは、表のセルに特定のピクセルの幅を与えることだけです。どのようにしてテーブルセルの内容を知らなくてもそれを行うことができますか？シンプル：

$(document).ready(function(){ 
    $('td').each(function(){ 
     $(this).css('width', $(this).width() +'px'); 
    }); 
}); 

Answer 2

.ui-sortable-helper { 
    display: table; 
} 

Answer 3

提供するソリューションのどれもが私のために働いていません。

私のケースでは、jQueryのui sortableの計算された高さと幅は、切り捨てられ、スタイル属性によって自動計算された次元を上書きしました。

ここで私が問題を解決するために行ったのは、提供されたソリューションのほとんどよりもエレガントであることがわかりました。 （たとえそれに!importantが入っていても）

.ui-sortable-helper { 
    width: auto !important; 
    height: auto !important; 
} 

Answer 4

私は解決策をオンラインで見つけました。

var fixHelper = function(e, ui) { 
    ui.children().each(function() { 
    $(this).width($(this).width()); 
    }); 
    return ui; 
}; 
$(“#sort tbody”).sortable({ 
helper: fixHelper 
}).disableSelection(); 

Fix sortable tr from shrinking

Answer 5

のsrc jqueryの-1.12.4.js

のsrc jqueryの-ui.js

リンクのrel jqueryの-ui.css

@model Servidor.CListados 
@{ 
    ViewBag.Title = "Index"; 
} 
@using (Html.BeginForm()) 
{ 
    <h2>Listados</h2> 
    <h2>@ViewBag.Mensaje</h2> 
    <table> 
      <tr> 
       <th>Campo1</th> 
       <th>Campo2</th> 
      </tr> 
     <tbody id="sortable"> 
      @foreach (var item in Model.ListaTabla1) 
      { 
       <tr > 
        <td>@Html.DisplayFor(modelItem => item.Campo1)</td> 
        <td>@Html.DisplayFor(modelItem => item.Campo2)</td> 
       </tr> 
      } 
     </tbody> 
    </table> 
    @*<ul id="sortable"> 
     @foreach (var item in Model.ListaTabla1) 
     { 
      <li>@Html.DisplayFor(modelItem => item.Campo1)</li> 
     } 
    </ul>*@ 
} 
    <script>$("#sortable").sortable();</script>