jQuery UI Sortable performance while sorting

Question

I have a calendar being used in production with 60 days and up to 5 sortable items per day, so that's 300 sortable items. The days are <td> elements and the events are <div>s.

Both sorting within a day and dragging from one day to another are slow. The element freezes up for a bit when it enters a new day or when it passes over another sortable item.

The delay seems related to both the number of days and the number of sortable items.

Here is the jQuery code.

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

How can I reduce the delay that occurs when sorting?

More info

Where chrome is calling Layout and RecalculateStyle many times in a row, there is the following warning:

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

Update: jsFiddle here - it is so unusably slow that I can't tell if it reproduces the problem or not. It is not like that in production. But if I start removing html (like weeks) from the example then I may not be able to reproduce the problem anyway.

Chrome's timeline inspector is showing that Layout and RecalculateStyle are being called about a hundred times in a row at the points mentioned above. — Benjamin
– Benjamin, Commented Jan 9, 2013 at 20:33
jsfiddle.net/benstenson/LBvmj @Dom the jsfiddle is so unusably slow that I can't tell if it reproduces the problem or not. It is not like that in production. But if I start removing html (like weeks) from the example then I may not be able to reproduce the problem anyway. — Benjamin
– Benjamin, Commented Apr 16, 2013 at 22:31
there is no reason for me to think it will even reproduce in jsfiddle — Benjamin
– Benjamin, Commented Apr 16, 2013 at 22:48
@Benjamin Post your code somewhere, even if it runs slow, we need to see the code. How about jsbin.com — Anthony Hatzopoulos
– Anthony Hatzopoulos, Commented Apr 17, 2013 at 15:57

Bernardo Mendes · Accepted Answer · 2013-04-17 19:29:59Z

6

+200

Seems i got it a lot faster by hiding all sortable elements before calling sortable and after it i show them again.

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

JSFiddle

Better way to fix it

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

JSFiddle

Seems that the hide elements messes with sortable, so we will only make the visible elements sortable.

edited Apr 17, 2013 at 19:29

answered Apr 17, 2013 at 19:12

Bernardo Mendes

1,2209 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bernardo Mendes Over a year ago

You dont show sundays so you will have to fix some stuff there, but i think this way you can improve the speed a lot.

Benjamin Over a year ago

Sweet, I think you did it. Just gotta do a little more testing here to confirm. This looks great so far.

Benjamin Over a year ago

Bernardo, thank you very much. It is definitely working smoothly in chrome now. I also checked in ie10 and it is lightning fast. Very cool. Thanks again.

Bernardo Mendes Over a year ago

You are welcome, i dont know why yet but seems that those invisible objects being sortable were the problem.

Collectives™ on Stack Overflow

jQuery UI Sortable performance while sorting

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related