Question

我有一个带有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

Answer 1

@ jeffery-to解决了我的问题。我们应该动态地将jQuery和jQuery UI添加到iframe并在加载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

了解更多相关信息

iQuery中的jQuery Sortable

1 个答案: