Using jQuery UI Sorting hundreds of elements on a page results in a very slow page loading - ideas on how to make it more efficient are needed

Question

I am creating a drag and drop calendar and found that jQuery UI sortable offers the best live performance for what I'm trying to do.

However, using sorting for several months (from 60 to 180 days at a time, sometimes more) leads to a noticeable lag in page loading, since my script uses all of these sortable instances. It works fine after loading, but I would prefer not to have an initial lag. In some cases, the browser even tries to kill the script.

I tried to make the first day of sorting the calendar, and then using jQuery.clone () copy all the other days, but unfortunately jQuery.clone () does not copy .sortable events. Other events (such as a click, double click, etc.) are copied in order, but not sorted. While doing some research on the Internet, all I could find was the statement that jQuery "does not support plugin cloning."

Is there a better way to do this? I looked through stackoverflow, jQuery UI forums, and Google in general and found nothing.

Thanks in advance, jamon

EDIT: Here is the code. Nothing special.

function sortableStop(event, ui) { // Saves to the DB here. Code removed - not relevant } $(".milestone-day").bind("dblclick", function(ev) { // Allows adding milestones. Code removed - not relevant }).sortable({ handle: '.handle', connectWith: '.milestone-day', items: '.milestone', stop: sortableStop }); 

The markup is as follows:

 <table> <tbody> <tr> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> </tr> <tr> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> <td><ul class="milestone-day"></ul></td> </tr> ... </tbody> </table> 

Milestones are li elements uploaded on their correct weekend through ajax.

EDIT 2: Working demo published:

http://www.clearsightstudio.com/demos/calendar-load/ Affairs>

EDIT 3: The demo has disappeared. Unfortunately.

Please note that there is a delay when opening the page. There is much more going on than on this demo in my real application, so the lag is even more noticeable.

Answer 1

call connectWith after calling sortable (), example:

 $('.whatever').sortable().sortable( "option", "connectWith", '.whatever' ); 

for some reason it improved the LOT performance in my script (thousands of items)

Answer 2

try not to associate all onload elements with something like this

 <script type="text/javascript"> jQuery(".milestone").live("mouseenter", function(){ function sortableStop(event, ui) { alert("Sortable stop fired!"); } $($(this).parent()).bind("dblclick", function() { alert("Double-click fired!"); }).sortable({ connectWith: '.milestone-day', items: '.milestone', stop: sortableStop }); }); </script> 

it will improve performance

Demo: http://jsfiddle.net/P27qv/

Answer 3

I had a similar problem with hundreds of images that needed to be dragged and dropped. and initialization took too long

I was able to solve this problem with lazy instantiation on mouseenter, it works fine and the user interface does not change

See fooobar.com/questions/887224 / for more details.

Answer 4

Move your code to associate all controls with the page load event. It will not be faster, but it will be faster for the user. You can also change the code and markup so that individual elements are disabled at boot time and after their events are connected, they are turned on. This will prevent quick jerking users click on them and wonder why nothing happened.

Answer 5

I managed to do this a lot faster if I hide the sortings before I call .sortable (). But that only made a big impact on the iPad Safari. For other browsers, it was almost the same.

Code example:

 $(".milestone-day").hide() $(".milestone-day").sortable({ handle: '.handle', connectWith: '.milestone-day', items: '.milestone', stop: sortableStop }); $(".milestone-day").show()