JQuery UI可排序拖动问题

Question

JQuery UI可排序拖动问题

3

我正在使用 jQuery UI 10.1.3，当垂直拖动行时，拖动的行会出现小幅度宽度偏移。在论坛上查看后，似乎以下 bug 描述了该问题。我的表格有非可见列（隐藏列）。

我们有没有解决方法？ http://bugs.jqueryui.com/ticket/9979 https://github.com/jquery/jquery-ui/commit/9711c54c6d3d7ecffa9bfccc205522be1f4aa148

- user3496151

你能创建一个JSFiddle吗？ - musicnothing

如果我们查看这个链接：http://jsbin.com/nohovilu/3/edit。在第一列中有隐藏的列，当拖动时，我们可以看到有一个小的垂直位移。如果这不太清楚，请告诉我。 - user3496151

我想我弄清楚了。请看下面我的答案。 - musicnothing

想知道答案是否解决了问题... :) - T J

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- musicnothing · Accepted Answer

问题在于jQueryUI添加了一个占位行，类名为ui-sortable-placeholder。占位符设置为visibility:hidden。这意味着您无法看到它，但它会占据它通常显示的空间。

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

点击查看此JSFiddle，你将看到我的意思。占位符在第一列和第二列之间添加了一个蓝色列。

您可以通过多种方式解决这个问题。一种方法是硬编码CSS以隐藏第二列，如此处所示和以下代码：

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

另一种方法是添加一些代码来隐藏在真实表格中已经被隐藏的占位符中的列，如此演示，并在此代码中：

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