Drag & drop across frames with jQuery UI

Question

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?

Answer 1

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.