javascript - jQuery将DIV置于最前面而无需重置iframe

点

我这里的代码来自我的“操作系统”，我正在尝试通过将iframe放入AppWindows中并将PHP代码作为后端或（主程序过程）在浏览器中创建。

现在，在每个GUI系统中，您都可以移动窗口，将窗口彼此堆叠等等，但是我无法使用jQuery和jQuery-UI在HTML中高效地进行操作。

我正在使用draggable（）和在StackOverflow上发现的一些技巧，能够将div AppWindow置于顶部。



问题

用于将AppWindow置于顶部的代码可以正常工作，但是问题在于该窗口内的iframe会重置，因为此代码正在执行的操作是将当前div作为第一个div堆叠在父容器中所有其他div之上。

http://nurky.rf.gd/code/AppWindowIssue/

如果您发现单击该窗口时AppWindow 1 iframe闪烁，则我不希望这样做。





代码（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框架”）或类似的方法，则可以在下面更加自由地编写。我想要像os.js或windows93.net之类的东西。我需要的只是一个工作任务栏，一个工作窗口，以及一种轻松地在该窗口中嵌入PHP页面的方法，该方法将模仿应用程序的工作。

最佳答案

我认为不可能。看看here。

但

为什么要通过首先更改窗口在dom中的位置来重新排序窗口？您可以简单地使用z-index。一个基本示例，您只需设置目标框架的活动类。

$(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进行了一些优化，以便一旦开始拖动，窗口就会变为活动状态。