JQuery UI drag and drop doesn't notice DOM changes happening during the dragging ?

Question

Hi everybody,

I have a html table in which each line (<tr>) represents a group of client computers. Each line can be expanded to show the clients belonging to the group. The <tr> containing the clients are always generated but hidden and showed when clicking the plus button at the beginning of each line.

The clients themselves (they are <div>) can be dragged and dropped in another group as long as this group is already expanded. So far it works fine.

What I am trying to achieve now is that the client can be dragged to a collapsed group and after a second or so hovering the group it will be expanded and the client can be dropped amongst the other clients of the group.

I programmed the hover using the in and outevents of the droppable and it expands the group all right, but (and now it starts to be hard to explain with words ;) the behavior of the droppable (the client) is still as if the table line that appeared were not there : the in out and drop events of the droppable are fired on the old position of the elements, and the in out and drop events of the newly appeared <tr> are never fired.

It looks as if JQuery memorizes the position, size etc. of the elements when the drag starts, and these values are not updated if there is a change in the DOM before the drop happens...

Can someone confirm this behavior is normal, or can it be caused by another problem in my own code ? Any workaround ?

(the question is quite bloated already so I don't include any code but I'll gladly upload it if required)

Edit : I can't add a picture since I am a new user but you can find one here : http://img69.imageshack.us/img69/309/20100413190123.png

Versions : JQuery is 1.3.2 and jquery-ui is 1.7.2

Answer 1

After a good night of sleep and further research I found the answer to my own question:

When a draggable starts to be dragged it calculates the positions of all the droppables that can accept it. By default the positions are not re-calculated after this. There is a draggable option that forces re-calculation on every "drag" event : refreshPositions, see : http://jqueryui.com/demos/draggable/#option-refreshPositions

There is currently no function or callback to manually fire the calculation only when needed (in my case : when a group is expanded) but it is a registered feature request.

See : http://groups.google.com/group/jquery-ui/browse_thread/thread/5a1fbb37ab8ef1a9?pli=1 and http://dev.jqueryui.com/ticket/4911

Examples of worarounds to manuallay recalculate only when needed : http://forum.jquery.com/topic/how-to-make-draggable-execute-refreshpositions-not-on-every-mousemove-but-with-a-specific-callback and http://trycatchfail.com/blog/post/2010/01/15/Work-around-for-jQuery-UI-Draggable-refresh-limitation.aspx