jQueryUI ordenable en las filas de la tabla los contrae mientras se arrastra

Question

Este problema de las filas de la tabla que se contraen mientras se arrastra en la función clasificable me causa problemas durante mucho tiempo. ¿Alguna respuesta? (Q & A)

P.S. Para poder trabajar en tablas, DEBE usar TBODY alrededor de las filas de la tabla que desea ordenar y luego llamar a la función ordenable en el contenedor que contiene TBODY.

Answer 1

Todo lo que necesita hacer es dar un ancho de píxel específico a las celdas de la tabla. ¿Cómo podemos hacerlo sin conocer el contenido de las celdas de la tabla? sencillo:

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

Answer 2

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

Answer 3

Ninguna de las soluciones ofrecidas trabajó para mí.

En mi caso, la altura y el ancho calculados de jQuery's ui sortable se redondearon hacia abajo y anularon las dimensiones calculadas automáticamente mediante el atributo de estilo.

Esto es lo que hice para solucionar el problema, que me pareció más elegante que la mayoría de las soluciones ofrecidas. (A pesar de que tiene !important s en ella.)

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

Answer 4

me encontré con una solución en línea.

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

link 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>