jQuery UI Sortable connectWith Load Time Performance on a Calendar

Question

jQuery UI Sortable + Draggable 1.6rc5

WHAT I AM DOING: Creating a calendar with varying date ranges (ex: could be 1 week displayed, could be 20 weeks displayed). This calendar has events in each day, and the events are sortable within the day itself, as well as between all other days on the visible calendar. My average calendar date range is approximately 10 weeks, which includes approximately 50 events.

THE PROBLEM: For each day on the calendar, jQuery's Sortable interaction takes a certain amount of time to set up. The more days that are visible, to which jQuery should apply Sortable, then more time the page takes to load. Throw in the option 'connectWith' to connect all calendar days together as interacting sortable lists. and the page take about 10x longer to load. For the 10 week, 50 event example, the page takes about 50 seconds to load.

CODE:

The calendar code looks something like this:

<table ... id="main-calendar"...> 
<tbody> 
<tr ... class="calendarDaysRow"...> 
<td ... > 
<ul class="schedule-sortable"> 
<li>SORTABLE ITEMS HERE</li> ...  
</ul>
</td> ... 
</tr> ... 
</tbody>
</table>

Setting up the sortable interaction:

jQuery("#main-calendar tbody tr.calendarDaysRow ul.schedule-sortable").sortable({ 
    connectWith: ["#main-calendar tbody tr.calendarDaysRow ul.schedule-sortable"]
});

WHAT I AM LOOKING FOR: A much quicker loading/setup time when the page loads. I will continue looking through the sortable source, but there doesn't seem to be many sortable options that will optimize the interaction setup time.

Answer 1

There does not seem to be a more optimized way to sort with jQuery. The best that is possible in UI version 1.7 is to use element IDs to access the elements.