title: jQuery UI Sortable performance while sorting
body: <p>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 <code>&lt;td&gt;</code> elements and the events are <code>&lt;div&gt;</code>s.</p>
  
  <p>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.</p>
  
  <p>The delay seems related to both the number of days and the number of sortable items.</p>
  
  <p>Here is the jQuery code.</p>
  
  <pre><code>$('.calendar-schedule-day').sortable({
      items: ".service-trip, .calendar-event",
      connectWith: ".calendar-schedule-day"
  });
  </code></pre>
  
  <p>How can I reduce the delay that occurs when sorting?</p>
  
  <p><strong>More info</strong></p>
  
  <p>Where chrome is calling <code>Layout</code> and <code>RecalculateStyle</code> many times in a row, there is the following warning:</p>
  
  <p>Layout - Details<br>
  Duration    15.000 ms (at 36.86 s)<br>
  Note    Forced synchronous layout is a possible performance bottleneck.<br>
  Layout invalidated<br>
  ....</p>
  
  <hr>
  
  <p>Update: <a href="http://jsfiddle.net/benstenson/LBvmj" rel="noreferrer">jsFiddle here</a> - 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.</p>