jQueryUI sortable on table rows shrinks them while being dragged

问题

This issue of table rows shrinking while dragged in the sortable function troubles me for a long time. Any answer? (Q&A)

P.S. in order for sortable to work at all on tables you MUST use TBODY around the table rows you wish to sort and then call the sortable function on the containing TBODY.

回答1:

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

回答2:

All you need to do, is to give a specific-pixeled width to the table cells. How can we do it without knowing the table cells' content? simple:

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

回答3:

I stumbled on a solution 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

回答4:

None of the offered solutions worked for me.

In my case, jQuery's ui sortable's calculated height and width, was rounded down and overriding the auto calculated dimensions via the style attribute.

Here is what I did to fix the problem, which I found to be more elegant than most of the offered solutions. (even though it has !importants in it.)

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

回答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>

来源：https://stackoverflow.com/questions/11146000/jqueryui-sortable-on-table-rows-shrinks-them-while-being-dragged

标签

jquery

jquery-ui

html-table

jquery-ui-sortable

shrink