JQuery ui 可排序拖动问题

Question

iam 使用 jquery ui 10.1.3，当垂直拖动行时，拖动行的宽度会发生小幅变化。当查看论坛时，看起来下面的错误就代表了它。我的表格有不可见的列(隐藏列)。

我们有解决这个问题的方法吗？

http://bugs.jqueryui.com/ticket/9979

https://github.com/jquery/jquery-ui/commit/9711c54c6d3d7ecffa9bfccc205522be1f4aa148

Answer 1

这里的问题是 jQueryUI 添加了一个占位符行，其类为 ui-sortable-placeholder。占位符设置为 visibility:hidden。这意味着您无法看到它，但它会占用正常可见的空间。

在此 JSBin 中，每行的第二列都被隐藏。这意味着第二列不会占用任何空间。这里的问题是，当 jQueryUI 创建占位符列时，它不会隐藏第二列。

Look at this JSFiddle你就会明白我的意思了。占位符在第一列和第二列之间添加了一个蓝色列。

您可以通过多种方式摆脱这个问题。一，通过硬编码 CSS 来隐藏第二列，as shown here ，并在此代码中:

.ui-sortable-placeholder td:nth-child(2)
{
    display:none;
}

另一种方法是添加一些代码来隐藏占位符中隐藏在真实表中的列，as shown here ，并在此代码中:

sort: function (e, ui) {
    ui.placeholder.find('td').each(function (key, value) {
        //alternative: if (!ui.item.find('td').hasClass('hidden')) $(this).show();
        if (ui.helper.find('td').eq(key).is(':visible')) $(this).show();
        else $(this).hide();
    });
}