jqueryui中的长行可排序，包含中断排序

Question

问题证明：http://jsfiddle.net/VLvj9/1/

用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 调用填充的（用户 内容的状态检查），并且宽度可以在页面的生命周期内任意更改，因此我无法在 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