6

我有一个在生产中使用的日历，它有 60 天，每天最多 5 个可分类项目，所以有 300 个可分类项目。日子是<td>元素，事件是<div>s。

在一天内排序和从一天拖到另一天都很慢。当元素进入新的一天或经过另一个可排序的项目时，元素会冻结一点。

延迟似乎与天数和可排序项目的数量有关。

这是jQuery代码。

$('.calendar-schedule-day').sortable({
    items: ".service-trip, .calendar-event",
    connectWith: ".calendar-schedule-day"
});

如何减少排序时发生的延迟？

更多信息

在 chrome连续多次调用Layout的地方，会出现以下警告：RecalculateStyle

布局 - 详细信息
持续时间 15.000 毫秒（36.86 秒）
注意强制同步布局可能是性能瓶颈。
布局无效
....

更新：这里的jsFiddle - 它太慢了，我无法判断它是否重现了问题。在生产中并非如此。但是，如果我开始从示例中删除 html（例如几周），那么无论如何我可能无法重现该问题。

4

1 回答 1

6

似乎我通过在调用 sortable 之前隐藏所有可排序元素并在它之后再次显示它们来更快地得到它。

$('.calendar-schedule-day').hide();
$('.calendar-schedule-day').sortable({ ... });
$('.calendar-schedule-day').sortable({ connectWith: ... });
$('.calendar-schedule-day').show();

JSFiddle

修复它的更好方法

只需使用此选择器$('.calendar-schedule-day:visible')，而不是$('.calendar-schedule-day')使用时.sortable()

JSFiddle

似乎隐藏元素与可排序混淆，因此我们只会使可见元素可排序。

于 2013-04-17T19:12:05.987 回答