jQuery-ui在iframe中可拖放到可排序

Question

我在主框架中有droppable放置元素，並且在iframe應用中sortable 。 我需要的是連接它們-能夠將項目拖動到iframe的sortable

我已經完成了： http : //jsfiddle.net/w9L3eorx/1/

在iframe我有

<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>

主框架

<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>

我看到了工作示例http://ma.rkusa.st/zepto-dnd/example.html 。 但是它是在沒有jquery的情況下構建的，因此無法在IE9上運行

Answer 1

干得好：

    $('.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');
            }
        })
    });

內容 ： http : //jsfiddle.net/w9L3eorx/5/

請注意，您的iframe應該只是純HTML（請勿在此處初始化可排序的類，否則將無法正常運行）

Answer 2

我已經更改了boszlo示例以適合我的需求：

• 我需要先在iframe中進行可排序的初始化（我的可拖放側邊欄稍后會在單擊后顯示）
• 我需要在父（主）框架中使用連接的dropable重新初始化可排序的對象，但要使用完全相同的選項 。

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

所以在iframe中，我添加了功能

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

這將破壞可排序並返回選項。

在droppable init之前的主框架中 ，我破壞了sortable並接受了選項

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

並使用相同的選項重新初始化sortable

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