connectWith performance problem with Sortable

We broke down the time it took to generate one of the huge javascript demanding page on our site and realized that all that javascript binding was taking much of the time. Out of that time, the vast majority of the time was spent applying .sortable() to enable drag&dropping of all elements.. It turns out that time is vastly reduced if we removed the connectWith option, but then user cannot drag&drop items from an iteration container to another..

By playing with this today I realized that we can save a lot of processing and time by setting the connectWith option AFTER the .sortable() is initialized!!

Before:

$(container).sortable({

distance: 5,

axis:"y",

"connectWith", '#story>.iteration_frame>.iteration_container.allowdrop'

cancel: 'div.disabled,div.opened,div.plan_table_message'

})

After:

$(container).sortable({

distance: 5,

axis:"y",

cancel: 'div.disabled,div.opened,div.plan_table_message'

}).sortable( "option", "connectWith", '#story>.iteration_frame>.iteration_container.allowdrop' ); For whatever reason setting this option AFTER initialization saves us 4X the time!!

The bottom line?

Plan, large page, all initiatives all items everybody,

Time to do JS bindings (browser is blocked for that time so it's a time user feels!)

Before: 16 935ms, 253437 calls

After: 5 617ms, 179336 calls

Work page, same selection

Before: 1200ms, 136 668 calls

After: 510ms, 39565 calls

The more sortable elements on the page the bigger the benefit!

You can look at that page on the forums:

http:forum.jquery.com/topic/interesting-bits-for-anyone-using-ui-sortable-with-the-connectingwith-option

• Mathieu