jQuery drag drop slower for more DIV items

Question

Hi there, 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.. :(

Answer 1

Hi Chetan, Yes i did as per the solution given for the question 552951. Gained some improvement. But how does the network latency matters when the jquery is executed on the browser. I tested a sample with about 100 Divs it was smooth. But more i added say 500+ its started becoming slower.. Is there any other way to tackle this?

Answer 2

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.