jQueryUI sortable sur les lignes de la table se rétrécit entre eux tout en étant traîné

Ce problème de lignes de la table rétrécit alors que traîné dans la fonction sortable m'inquiète pour un long moment. Aucune réponse? (Q&A)

P. S. pour triable de travailler à tous sur les tables, vous DEVEZ utiliser TBODY autour de la table de lignes que vous souhaitez trier, puis d'appeler la fonction sortable sur le contenant TBODY.

OriginalL'auteur Yossi | 2012-06-21

  1. 37
    .ui-sortable-helper {
    display: table;
}
    wow! facile et de travail! merci!
    +1 super de voir une telle solution simple; j'ai souffert en silence de cette question depuis longtemps. Même si j'ai encore quelques largeur de la cellule différences entre les ligne(s) en cours de glissement et le reste, c'est assez proche de la balle magique.
    Est-ce n'importe où dans les docs? Je n'arrive pas à le trouver. Mais je veux comprendre un peu mieux.
    J'ai un bootstrap de la table et de la table se rétrécit en les faisant glisser. Votre solution fonctionne pour une ligne - il ne recule pas devant les plus tout en faisant glisser. Aucune solution pour le tableau de rester largeur fixe tout en faisant glisser?

    OriginalL'auteur Alexandr Derkach

  2. 12

    Tout ce que vous devez faire, est de donner un spécifique-pixeled largeur de la table de cellules. Comment pouvons-nous le faire sans le savoir les cellules de la table' contenu? simple:

    $(document).ready(function(){
    $('td').each(function(){
        $(this).css('width', $(this).width() +'px');
    });
});
    Je vous remercie. Cela fonctionne parfaitement avec Bootstrap, qui n'ont pas de solutions claires.
    La "meilleure" approche est sur stackoverflow
    J'aime cette approche. Mieux que le "mieux".
    Devrait probablement utiliser $(this).outerWidth (), car il comprend un rembourrage
    Le problème, c'est qu'il ne fonctionne qu'une fois. Le "mieux", on court même si la fenêtre est redimensionnée.

    OriginalL'auteur Yossi

  3. 10

    Je suis tombé sur une solution en ligne.

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

    Fix sortable tr de réduction

    Génial, Upvote de mon côté. Merci pour cela.
    Fonctionne parfaitement, merci
    Dire merci, ici, que votre commentaire sur stackoverflow.com/a/10481803/1531124 a sauvé ma journée avec Intellij!

    OriginalL'auteur bmoran

  4. -1

    Aucune des solutions proposées a fonctionné pour moi.

    Dans mon cas, jQuery ui sortable est calculé en hauteur et en largeur, a été arrondi à l'inférieur et supérieur de l'auto calculée dimensions via l'attribut style.

    Voici ce que j'ai fait pour résoudre le problème, que j'ai trouvé pour être plus élégant que la plupart des solutions proposées. (même si il a !importants).

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

    OriginalL'auteur fakalit

  5. -4

    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>

    OriginalL'auteur julio