javascript - jQuery 在不重置 iframe 的情况下将 DIV 放在前面

Question

点

我这里的代码来 self 的“操作系统”，我试图通过将 iframe 放入 AppWindows 中并使用 PHP 代码作为后端或(主程序进程)在浏览器中创建。

现在在每个 GUI 系统中，您都可以移动窗口、将一个窗口堆叠在一起等等，但我无法使用 jQuery 和 jQuery-UI 在 HTML 中高效地完成。

我正在使用 draggable() 和我在 StackOverflow 上找到的一些技巧，以便能够将 div AppWindow 置于顶部。

---

问题

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

如果您注意到 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 Framework”或类似的东西，你可以更自由地写在下面。

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

Answer 1

我认为这是不可能的。看看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，以便在您开始拖动时窗口变为事件状态。