Optimizing jQuery UI drag and drop schedule grid

Question

I have a schedule grid based on a HTML table using jQuery/jQuery UI drag and drop. Each cell in the table represents a user and timeslot. I've got good performance in IE9, FireFox, and Chrome however IE8 is unusable because there is a several second pause between the time a user starts a drag and the time the drag helper appears.

I know part of the problem is that I am creating a large number of droppables, in this case:

112 Users on a 24 hour grid (total of 2688 droppables created)

If I remove the code that makes the empty 2688 cells dropable the speed increases significantly, but animation still feels sluggish in IE8.

What are some suggestions for speeding this up? I've considered making the table itself the droppable, but I'm not sure how I would calculate which cell was being dropped onto, and I would lose the hoverState CSS background that indicates the active cell.

One key requirement is that I stick with the HTML table because of how it is data bound on the server.

Am I fighting a losing battle against IE8? I'd really like to make this as fast as possible in that browser.

Answer 1

I'd try to bind to the mouseover event, and don't actually initialize any of the droppable (or other arguments you need for interaction on the elements) until the mouse is actually over the element. I increased performance by about 400% on a highly interactive page by taking this route.

If that doesn't help, consider testing with dynaTrace ajax edition that shows you where the slow points are in the javascript.