jQuery UI排序时的可排序性能

Question

我有一个日历用于生产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(如周),那么无论如何我可能无法重现问题.

Answer 1

似乎我通过在调用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

似乎隐藏元素可以排序,因此我们只会将可见元素排序.