jQuery Forum

Hi,

first of all: thanks for jQuery - it's amazing how much you can do with just a few lines of code :).

Some days ago we started implementing drag and drop functionality in on of our web-applications.
We developed that functionality with jQuery.
Initially we developed it in Firefox - and it works like a charm there.
But since quite a lot of our customers are using Internet Explorer we tested our new code there.

Unfortunately the user experienice in IE8 is not as great as in Firefox.
The first problem we were seeing was that the initial page load took ages (15 seconds).
We have 140 "droppable" elements on our page - those elements are initialized (see below) on the first page load.

The reason for the slow page load seems to be some Internet Explorer 8 problem.
I ran IE's profiler and I found out that the slowness is due to jquery.ui.droppable's _create().
The faulty line can be found here (line 39): https://github.com/jquery/jquery-ui/blob/f165c93127495d5041c3d49fa592fddbe8000bd1/ui/jquery.ui.droppable.js#L39
It seems that calling offsetWidth or offsetHeight in IE8 (in standards mode) is VERY slow.
Opening the page in "compatibility mode" or forcing "quirks mode" for the page reduces the initial page load time from 15 seconds to <1 second (which is fine).
Just hardcoding 0 as width and height there makes the page load almost as fast as in Firefox.

I may have found a related article where someone else complains about the offsetWidth/offsetHeight performance in IE8's standards mode.
http://stackoverflow.com/questions/3535875/ie-8-quirks-vs-standards-retrieving-offsetheight-offsetwidth
We're also using a "large" table (140 cells = 140 droppable elements).
But the article itself doesn't point to a solution (unfortunately).


The second issue we're seeing is the "drag" performance itself.
The performance in Firefox, IE7 and IE8 with forced quirks mode is good.
But dragging an element in IE8 (in standards mode) is very slow.
The element lags behind the cursor by ~1.5 seconds and it looks very "choppy".


Here's the JavaScript we're using to add drag and drop capabilities:

1. jQuery('div[id=dragable]').draggable({
2.     revert: true,
3.     revertDuration: 250,
4.     cursor: "move",
5.     helper: 'clone',
6.     cursorAt: { top: -12, left: -20 }
7. });
8. 
   
9. jQuery('div[id=dropable]').droppable({
10.     tolerance: 'pointer',
11.     drop: function(event, ui) {
12.         // our drop JS - skipped as dragging is slow (and dropping itself works fine).
13.     }
14. });

   
In case you need more information about our code please don't hesitate to ask ;)

Thanks in advance!
Kind Regards,
Martin