jQueryUtilizzabile sulle righe della tabella le riduce mentre vengono trascinate

Question

Questo problema di righe di tabella che si restringono mentre trascinate nella funzione ordinabile mi turba a lungo. Qualche risposta? (Q & A)

P.S. Per poter lavorare a tutti i costi su tavoli, DEVI usare TBODY attorno alle righe della tabella che desideri ordinare e quindi chiamare la funzione ordinabile sul TBODY contenente.

Answer 1

Tutto ciò che dovete fare è dare una larghezza pixel-specifica alle celle della tabella. Come possiamo farlo senza conoscere il contenuto delle celle della tabella? semplice:

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

Answer 2

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

Answer 3

Nessuna delle soluzioni proposte ha funzionato per me.

Nel mio caso, l'altezza e la larghezza calcolate dall'utente di jQuery sono state arrotondate per eccesso e sostituiscono le quote calcolate automaticamente tramite l'attributo di stile.

Ecco cosa ho fatto per risolvere il problema, che ho trovato più elegante della maggior parte delle soluzioni offerte. (Anche se ha !important s in esso.)

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

Answer 4

mi sono imbattuto su una soluzione online.

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>