jQuery-ui 可拖放到 iframe 内排序答案

【问题标题】：jQuery-ui droppable to sortable inside iframejQuery-ui 可拖放到 iframe 内排序
【发布时间】：2015-08-17 11:07:44
【问题描述】：

我在主框架中有 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

【问题讨论】：

标签： javascript jquery jquery-ui iframe jquery-ui-sortable

【解决方案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');
            }
        })
    });

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

请注意，您的 iframe 应该只是纯 HTML（不要在那里初始化可排序，否则会出现异常）

【讨论】：

谢谢，部分解决了我的问题，但我需要先在 iframe 中进行 init 排序（我的情况比这个例子复杂得多）。我可以先以某种方式 destroy 排序吗？例如...connectToSortable:$('#frame').contents().find('.content').sortable('destroy').sortable({..

【解决方案2】：

我已更改 boszlo 示例以满足我的需要：

我需要首先在 iframe 中进行 init 排序（单击后我的可放置侧边栏稍后会出现）
我需要在父（主）框架中重新初始化可排序，并连接可放置但完全相同的选项。

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

所以在 iframe 我添加了函数

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

这将破坏可排序并返回选项。

在我的 main frame droppable init 之前，我销毁 sortable 并选择选项

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

并使用相同的选项重新初始化sortable

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

【讨论】：