I would like to do this:
Drag a DIV element from a first document that contains an IFRAME
Drop this DIV element into into a second document, inside the IFRAME.
Is there a way to use jQuery UI draggable & droppable to achieve this? or otherwise do this in a cross-browser way, possibly with another JS library?
You can easily do this by accessing the contents inside the iframe with jQuery this way:
$( 'your-iframe' ).contents().find( 'elements-to-find' ).droppable();
To make sure the iframe contents are loaded when you run the script, you must wait for the jQuery load event of the iframe.
$('your-iframe').load(function() {
$( 'your-iframe' ).contents().find( 'elements-to-find' ).droppable();
});
I had the same necessity of you and managed to do drag and drop between iframes this way, and everything worked correctly.