0

问题演示：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 在拖动时缩小它们

我的问题是表格内容由 ajax 调用（用户 <input> 内容的状态检查）填充，并且宽度可以在页面的生命周期内任意更改，因此我无法在 td 或表格上设置 px 宽度。

4

1 回答 1

0

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

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

这是你更新的小提琴

编辑

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

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);

工作的小提琴

于 2013-02-15T05:37:46.900 回答