jQuery bring DIV infront without reseting iframe

Question

Point

The code I have here is from my "operating system" I'm trying to create inside a browser by putting iframes in AppWindows with PHP code as the backend or the (main program process).

Now in every GUI system you have the ability to move windows, stack one on top of each others and such, but I'm not able to do efficiently in HTML using jQuery & jQuery-UI.

I'm using draggable() and some tricks I've found on StackOverflow to be able to bring the div AppWindow on top.

---

The problem

The code for bringing the **AppWindow** on top works fine but the problem is the iframe inside that window gets reset, because what this code is doing is that it stacks the current div as the first div above all the others inside the parent container.

If you notice the AppWindow 1 iframe blinks when you click on that window, I don't want that.

---

Code (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"});
});

---

Conclusion

If there is a way of preventing this from happening feel free to write an answer below.

If you have a better way such as "JavaScript OS UI Framework" or something like that you're even more free to write below.

I want something like **os.js** or **windows93.net** type of thing. All I need is a working taskbar, working window and a way to easily embed a PHP page inside that window that will mimic the work of the application.

Answer 1

I don't think it's possible. Take a look at here.

But

why do you reorder windows by change their positions in the dom in the first place? You could simply work with z-index. A basic example where you just set an active class of the targeted frame.

$(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');
    }
});

with following css changes

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

Edit: optimized the js a bit so that the window turns active once you start dragging.