jQuery UI sortable, each sortable div contains an iFrame gets refreshed in FF3 but not in IE7

Question

I'm using the jQuery UI Sortable on DIV which contains DIV tags. Inside of each of the sortable DIV's is an iFrame with a src= to a different site.

In IE7, sorting works as expected. If you've navigated within the iFrame, the iFrame retains the current state.

However, in FF3, when sorting stops and the iFrame is reloaded with the original url specified. This is not what I want.

I've tried using both DIV/DIVs and UL/LIs and both behave the same.

Answer 1

This is a bug in FF (and apparently Safari 3.5/Win and Opera 9.5/Win): iframes reload if moved in the DOM tree. (jQuery sortable moves the node in the DOM tree when you drop it).

See https://bugzilla.mozilla.org/show_bug.cgi?id=254144.

The way I've gotten around this before is to designate some area attached to the iframes parent the "handle" for jQuery sortable to operate on. For example:

+-----------------------+
| Drag Me | iframe here |
+---------+             |
          |             |
          +-------------+

You drag the "handle", and not the actual iframe container. On Drop, you re-arrange the handles, leaving the iframe where it is in the DOM. This worked well in my case but YMMV.