iFrame 中的 jQuery 可排序答案

【问题标题】：jQuery Sortable in iFrameiFrame 中的 jQuery 可排序
【发布时间】：2013-12-18 15:02:11
【问题描述】：

我有一个带有 jQuery 可排序内容的 iFrame。所有代码都已完成并且可以工作，但是当我拖动一个项目来更改它时，鼠标无法工作并暂停，直到移出 iFrame，现在该项目处于拖动状态。

我该如何解决这个问题？我认为这个问题与 iFrame 上的鼠标事件有关。

JS：

     var d = function (a, b) {
        b.children().each(function () {
            $(this).width($(this).width());
        });
        return b;
    };

$($("#frame").contents().find('body')).find("#DragAndDrop tbody").sortable({
            helper: d,
            revert: "invalid",
            cursor: "move",
            opacity: 0.7,
            containment: "parent",
            items: "tr.DragAndDrop",
            dropOnEmpty: false,
            start: function(e, ui){
                ui.placeholder.height(ui.item.height());
            }
        }).disableSelection();

HTML：

<iframe src="./theme.html" id="frame" style="width: 100%; height: 1020px; " frameborder='0'></iframe>

sortable 的内容是带有 DragAndDrop id 的 Table。所有带有 DragAndDrop 类的 tr 都应该使用 jquery sortable 进行排序。

更新：

这是 iframe 的简单演示。帮我对 iFrame 的内容进行排序。我只是想知道你是怎么做到的。 http://jsfiddle.net/saeedhbi/vRbM5/2/

更新 2：

问题解决了。您可以在此找到解决方案：Creating a jQuery UI sortable in an iframe

【问题讨论】：

您有任何代码或示例给我们吗？
请显示您尝试过的代码。
您的可排序代码是否必须在 iframe 中运行？
好的。我已经确定代码“应该”工作。但是，基于此stackoverflow.com/questions/19274439/…，您似乎必须将 iframe 的 jQuery 代码放在 iframe 中。
如果您回答您的问题并将其标记为答案会更好。

标签： jquery jquery-ui-sortable

【解决方案1】：

@jeffery-to 解决了我的问题。我们应该在 iframe 中动态添加 jQuery 和 jQuery UI，并在 jQuery 加载后加载 jQuery UI。

$('iframe')
    .load(function() {
        var win = this.contentWindow,
            doc = win.document,
            body = doc.body,
            jQueryLoaded = false,
            jQuery;

        function loadJQueryUI() {
            body.removeChild(jQuery);
            jQuery = null;

            win.jQuery.ajax({
                url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
                dataType: 'script',
                cache: true,
                success: function () {
                    win.jQuery('.sortable').sortable();
                }
            });
        }

        jQuery = doc.createElement('script');

        // based on https://gist.github.com/getify/603980
        jQuery.onload = jQuery.onreadystatechange = function () {
            if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) {
                return false;
            }
            jQuery.onload = jQuery.onreadystatechange = null;
            jQueryLoaded = true;
            loadJQueryUI();
        };

        jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        body.appendChild(jQuery);
    })
    .prop('src', 'iframe-test.html');

在https://stackoverflow.com/a/11240770/2855673阅读有关此的更多信息

【讨论】：