JQuery UI Sort by Sort

Question

I have a calendar that is used in production with 60 days and up to 5 sortable items per day, to 300 sorted items. Days <td> , and events <div> s.

Both sorting during the day and dragging from one day to another are slow. An element hangs a bit when it enters a new day or when it passes another sortable element.

The delay is related to both the number of days and the number of items to be sorted.

Here is the jQuery code.

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

How to reduce sorting delay?

Additional Information

If chrome calls Layout and RecalculateStyle many times in a row, the following warning appears:

Layout Details
Duration 15.000 ms (at 36.86 s)
Note. Forced synchronous layout is a possible performance bottleneck.
Layout is invalid
....

---

Update: jsFiddle here is so unusually slow that I cannot tell if it reproduces the problem or not. This is not the case in production. But if I start to remove html (e.g. weeks) from the example, then I may not be able to reproduce the problem.

Answer 1

It seems I got it a lot faster by hiding all the sortable items before calling the sort, and after that I will show them again.

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

Jsfiddle

Best way to fix it

just use this $('.calendar-schedule-day:visible') selector instead of $('.calendar-schedule-day') when using .sortable()

Jsfiddle

It seems that hidden elements are randomly sorted, so we will only make visible elements.