jQuery UI Sortable and Google gadgets

Question

I have seen a couple similar questions, but nothing that specifically covers my problem. I am trying to place several Google gadgets in a set of sortable divs. When I drag one of these divs and drop it in a new location, the whole page is refreshing and showing me only the content of that gadget's iframe.

I have seen from the other SO questions that Firefox contains a bug in which iframe content is refreshed if it is moved in the DOM tree. That behavior isn't ideal, but I'd gladly take it over what I'm experiencing now. Firefox and Chrome both give me this problem. IE and Opera properly sort the gadgets.

Does anybody have some insight as to how I can work around this?

Answer 1

What about destroying the widget (i.e. removing the iframe) on dragstart and rebuilding it when the dragging has finished?

Answer 2

That won't work, that's actually why the issue occurs.

The draggable destroys the element from the DOM tree, and the droppable re-adds it. The problem occurs when the droppable occurs - it add the gadget html to the new position in the DOM tree and causes the script and iframe elements to load again, something fires within one of those elements (or both) that causes this behaviour to occur. It does not appear that the page actually navigates to the gadget URL though so it's almost as if the iframe just reloads on top of everything else.

I know this is an old post but does anyone have any ideas?