CODEWITHSUNDEEP
jqueryperformancejquery-uidrag-and-drop

Reputation:

jQuery drag drop slower for more DIV items

I have got a hierarchichal tags (with parent child relationship) in my page and it will account to 500 - 4500 (can even grow). When i bound the draggable and droppable for all i saw very bad performance in IE7 and IE6. The custom helper wont move smoothly and was very very slow. Based on some other post i have made the droppable been bound/unbound on mouseover and mouseout events (dynamically). Its better now.

But still i dont see the custom helper move very smoothly there is a gap between the mouse cursor and the helper when they move and gets very bad when i access the site from remote.

Please help me to address this performance issue. Am totally stuck here.. :(

Upvotes: 4

Views: 4496

Answers (2)

Vala
Vala

Reputation: 5674

I've had a similar problem before (not droppable divs, but too many divs impacting performance). For us the solution was to re-use divs as they scrolled off-screen since you won't have anywhere near as many divs if you only ever have the ones currently in view plus a few more to scroll up/down. Of course, it was a little easier for us because it was controlled using a remote that could only move one screen at a time and didn't have to take in to consideration clicking random places on the scroll-bar, but it may still be of some use to you. In case the above explanation isn't clear enough, it works something like this:

|  [spare divs]
| -----------------
|  [buffered divs for page-up]
| -----------------
|  [divs currently on screen]
| -----------------
|  [buffered divs for page-down]
| -----------------
|  [spare divs]
| -----------------

Now whenever you scroll you populate all the divs that are now on the page with the data you want, then sort out the buffers, leaving any other divs blank. In your case rather than changing data you may get away with toggling droppable on/off.

Upvotes: 1

Chetan S
Chetan S

Reputation: 23803

Try to reduce the number of droppables at any given moment. There is no other way.

One strategy is to combine drop targets into groups bound by divs and bind the children of this div as droppables only on mouse enter of this parent div and de-register on mouse leave.

Upvotes: 1

Related Questions