jQuery UI .sortable() call is slow when applies to thousands of elements

jquery, jquery-ui, jquery-ui-sortable, performance

Solution

a tough one, I had a similar problem with hundreds of images that needed to be draggable. and initialization just took too much time

I was able to solve it by lazy instantiation upon mouseenter, it works great, and the user experience is not changed

Here is how it could be done with sortable: (http://jsfiddle.net/q8ND4/3/)

var $sortable1 = $( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  items: ".sorting-initialize" // only insert element with class sorting-initialize
});
$sortable1.find(".ui-state-default").one("mouseenter",function(){
  $(this).addClass("sorting-initialize");
  $sortable1.sortable('refresh');
});

In your example it decreases the time from 30ms to 8ms.

Another improvement: The next step will be to move the mouseenter handler binding to the point in code when you append these `<li>` to the list (if this is done via js on the client side)

Problem

My issue is basically this - Applying jQuery UI Sortable to hundreds of elements on a page results in very slow page load -- need ideas on how to make it more efficient but since none of the answers solved my problem, I'm asking the question again. Applying .sortable() on 300 elements (http://jsfiddle.net/LcgEL/) takes about 60ms. Applying it to thousands of element results in times approaching 250ms. This introduces a very noticeable delay that affects the user experience as it appears the application is laggy. Is there any way to speed this up? Thanks! ``` JSFiddle link for the code - http://jsfiddle.net/LcgEL/ ```

Original source