jquery-ui - 当容器有隐藏项目时，jQuery UI 可排序拖动启动很慢

Question

我有一个无序的“源”列表，最多可以包含大约 1,000 个列表项。我希望能够将源列表中的项目拖到连接的“目标”列表中。在我的源列表被过滤之前，我一切正常。我正在使用 jquery quicksearch 插件来过滤(搜索)我的源列表。过滤器是通过设置 'display:none;' 来完成的在与搜索不匹配的项目上。

当我的源列表中的 1..n 个项目被隐藏时，拖动操作在启动时不流畅。意思是，我单击要拖动的项目，在屏幕上移动鼠标，但是直到我开始拖动后大约一整秒，我拖动的项目才会出现在我的光标下。

对于诊断，我已将我的用例缩减为一个我想要排序的列表。通过将我的列表项的一半硬编码为隐藏，我已经完全消除了快速搜索的使用。我仍然能够重现“非流体”行为。我的例子在这里:

http://pastebin.com/g0mVE6sc

如果我从示例中的列表中删除溢出样式，性能会好一点，但仍然比我希望看到的要慢。

在我开始考虑其他选择之前，有人对我有什么建议吗？

提前致谢。

Answer 1

正如你在这个 上看到的jsferf 例如，计算隐藏元素(不显示)的外层宽度()/外层高度()(这是插件所做的 - 见下文)比可见元素慢得多 ，无论是通过样式属性还是类来实现。

我发现绕过这个并仍然获得相同结果的唯一方法是设置 要隐藏到零的元素的高度 , 而不是使用 display 属性，无论是使用样式属性还是类:

<li style="height: 0;">b</li>
<li class="hidden">b</li>

.hidden { height: 0 }

DEMO (with class) - DEMO (with style attr)

拖动元素时 sortable 发生了什么？

开始拖动时，插件会刷新所有项目的列表并重新计算所有元素的位置。该插件实际上获得了外层宽度和外层高度:

_mouseStart: function(event, overrideHandle, noActivation) {
    ...
    //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture
    this.refreshPositions();
    ...
}

refreshPositions: function(fast) {
    ...
    for (var i = this.items.length - 1; i >= 0; i--) {
        var item = this.items[i];
        ...
        if (!fast) {
            item.width = t.outerWidth();
            item.height = t.outerHeight();
        }
        var p = t.offset();
        item.left = p.left;
        item.top = p.top;
    };
    ...
    return this;
},​