jQuery 在不重置 iframe 的情况下将 DIV 置于最前面

Question

点

我这里的代码来自我的 "operating system" 我试图通过将 iframe 放在 AppWindows 中以 PHP 代码作为后端或（主程序进程）在浏览器中创建。

现在在每个 GUI 系统中你都可以移动 windows，将一个堆叠在彼此之上等等，但我无法在 [=46] 中高效地完成=] 使用 jQuery & jQuery-UI.

我正在使用 draggable() 和我在 Whosebug 上发现的一些技巧，能够带来 div AppWindow 在上面。

问题

将 **AppWindow** 置于顶部的代码工作正常，但问题是 window 中的 iframe 被重置，因为这段代码正在做的是它将当前 div 堆叠为第一个div 高于父容器内的所有其他容器。

如果您注意到 AppWindow 1 iframe 在您单击 window 时闪烁，我不希望这样。

代码 (jQuery)

$(function() {
    // Don't know what I'm doing with iframe here...
    $('.AppWindow iframe').click(function(){
        $(this).parent().child.parent().append(this);
    });
    $('.AppWindow').click(function(){
        $(this).parent().append($(this));
    });
    $('.AppWindow').draggable({handle:".DragHandle"});
});

结论

如果有办法防止这种情况发生，请随时在下面写下答案。

如果你有更好的方法比如"JavaScript OS UI Framework"之类的你就更自由地写在下面

我想要一些东西像 **os.js** 或 **windows93.net** 类型的东西。我所需要的只是一个工作任务栏，工作 window 和一种在 window 中轻松嵌入 PHP 页面的方法，它将模仿应用程序的工作。

Answer 1

我认为这不可能。看看here.

但是

为什么要重新排序 windows，首先要改变它们在 dom 中的位置？您可以简单地使用 z-index。一个基本示例，您只需设置目标框架的活动 class。

$(function() {
    $('.AppWindow').draggable({
        handle:".DragHandle",
        drag: function(event, ui){
            updateActiveWindow(event.target);
        }
    });

    $('.AppWindow').on('click', function(){
        updateActiveWindow(this);
    });

    function updateActiveWindow(el) {
        $('.AppWindow').removeClass('active');
        $(el).addClass('active');
    }
});

具有以下 css 变化

.AppWindow.ui-draggable-dragging,
.AppWindow.active {
    z-index: 1;
}

编辑：稍微优化了 js，以便 window 在您开始拖动后激活。

jQuery 在不重置 iframe 的情况下将 DIV 置于最前面

jQuery bring DIV infront without reseting iframe

html

javascript

iframe

jquery

frameworks

点

问题

代码 (jQuery)

结论