JQuery drag slower for more div elements

Question

I have hierarchical tags (with parent relationships with children) on my page, and it will be 500 - 4500 (may even grow). When I linked drag-and-drop and droppable for everyone, I saw very poor performance in IE7 and IE6. The user assistant will not move smoothly and very slowly. Based on some other posts, I made droppable bound / unbound on mouseover and mouseout events (dynamically). Now it is better.

But still, I don’t see the user helper moving very smoothly when it moves between them and it becomes very bad when I find access to the site from a remote computer, there is a gap between the mouse cursor and the assistant.

Please help me solve this problem. I am completely stuck here. :(

Answer 1

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

One strategy is to combine the quotation targets into groups associated with divs, and bind the children of this div as droppables only when you mouse over this parent div and deindicate when you release the mouse.

Answer 2

I had a similar problem before (not droppable divs, but too many divs affecting performance). For us, the solution was to reuse divs as they scrolled off the screen, since you won’t have anywhere near so many divs if you only have the ones that are currently displayed, and a few more for scroll up / down. Of course, it was a little easier for us, because it was controlled with a remote control that could only move one screen at a time, and it did not have to take into account the click of random places on the scroll bar, but it could still be of some use for you. If the above explanation is not 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 every time you scroll, you fill in all the divs that are now on the page with the data you need, then sort the buffers, leaving all the other divs empty. In your case, instead of changing the data, you can leave with turning on / off.