JQuery UI drag and drop doesn't notice DOM changes happening during the dragging?
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 out
events 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
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
精彩评论