Question

使用html

<table>
    <tbody class="sortme">
        <tr><td>Foo</td></tr>
        <tr><td>Bar</td></tr>
        <tr><td>Really long and annoying table row, try to sort me!</td></tr>
    </tbody>
</table>

和jqueryui

$(".sortme").sortable({
    containment: "parent",
    tolerance: "pointer"
}).disableSelection();

如果您尝试拖动并排序长行，则父容器会将其宽度向下捕捉。

，新的小父母将帮助器从屏幕上推开，无法进行分类。

如果没有containment属性，则不会发生这种情况。我可以在start()事件中修改占位符的宽度以保持父级宽，但看起来包含信息已经由该点设置，并且帮助程序表现出相同的行为。

有没有办法让父级维护其宽度信息，以便包含按预期工作？

<小时/> 我相信这个问题指的是同样的行为：

jQueryUI sortable on table rows shrinks them while being dragged

我的问题是表格内容是由ajax调用（用户＆lt; input＆gt;内容的状态检查）填充的，宽度可以在页面生命周期内任意改变，所以我不能在td上设置px宽度或者表

Answer 1

以百分比为父母定义一些宽度：

<table style="width:100%;">
<div class="sortme" style="display: inline-block; width:100%;">

这是您更新的fiddle

修改

由于您不希望宽度为百分比，因此我计算了最宽元素的宽度并将其应用于父元素。这是代码

var width = $('.sortme div').width(); //Returns max width from all the matched elements $('#sortDiv').width(width); var width2 = $('.sortme tr td').width(); //Returns max width from all the matched elements $('#sortTable').width(width2);

工作fiddle

jqueryui中的长行可以使用包含中断排序进行排序

1 个答案: