jQuery-ui droppable to sortable inside iframe

Question

I have droppable elements in main frame, and sortable inside iframe app. What I need is to connect them - to be able to drag items to iframe's sortable

There is what I've done: http://jsfiddle.net/w9L3eorx/1/

Inside iframe I have

<div class="content">
    <div class="block">Foo</div>
    <div class="block">Bar</div>
</div>

<script>
    $('.content').sortable({
        iframeFix: true,
        placeholder: 'block-placeholder',
        update: function (event, ui) {
            // turn the dragged item into a "block"
            ui.item.addClass('block');
        }
    });
</script>

The main frame

<div class='items'>
    <div class="one">One</div>
    <div class="two">Two</div>
</div>

<iframe src="frame.html" id="frame" width="800" height="800"></iframe>

<script>
    $('.items div').draggable({
        helper: function(e) {
            return $('<div>').addClass('block').text( $(e.target).text() );
        },
        iframeFix: true,
        connectToSortable: $('.content', $("#frame")[0].contentDocument)
    });
</script>

I see working example http://ma.rkusa.st/zepto-dnd/example.html. But it is built without jquery and is not working on IE9

Answer 1

Here you go:

    $('.items div').draggable({
        helper: function(e) {
            return $('<div>').addClass('block').text( $(e.target).text() );
        },
        iframeFix: true,
        connectToSortable:$('#frame').contents().find('.content').sortable({
            iframeFix: true,
            placeholder: 'block-placeholder',
            update: function (event, ui) {
                // turn the dragged item into a "block"
                ui.item.addClass('block');
            }
        })
    });

FIDDLE: http://jsfiddle.net/w9L3eorx/5/

Note that your iframe should be just plain HTML (do not initialize sortable there or it will misbehave)

Answer 2

I have changed boszlo example to fit my needs:

• I need first init sortable in iframe (my dropable sidebar will appear later after some clicks)
• I need re-init sortable in parent (main) frame with connected dropable but with exact the same options.

http://jsfiddle.net/w9L3eorx/8/

So in iframe I have added function

window.destroySortableAndGetOptions = function (selector) {
    var opts = $(selector).sortable('option');
    $(selector).sortable('destroy');
    return opts;
}

Which will destroy sortable and returns options.

And in my main frame before droppable init, I destroy sortable and take options

var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content');

and re-init sortable with the same options

...
connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions)
...