Ich habe kürzlich Probleme mit den Plugins JQuery Draggable und Resizable bekommen. Auf der Suche nach Lösungen habe ich an vielen Stellen sehr fragmentierten Code gefunden und schließlich eine saubere Lösung gefunden, die für mich fast perfekt zu funktionieren scheint.

Ich dachte, ich würde meine Erkenntnisse an andere weitergeben, falls sie auch auf dieses Problem stoßen.

Ich habe ein Div, das und IFrame enthält. Dieses Div muss in der Größe veränderbar und ziehbar sein. Einfach genug - füge die jquery zieh- und veränderbar zum div hinzu wie folgt:

$("#Div").draggable();
$("#Div").resizable();

All ist in Ordnung, bis Sie über ein anderes Div mit einem Iframe ziehen oder versuchen, die Größe Ihres aktuellen Div zu ändern, indem Sie über Ihr aktuelles Iframe fahren. Beide Funktionen werden beendet, wenn ein iframe überschritten wird.

Lösung

$("#Div").draggable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
        var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
        $(element).append(d);});
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});



$("#Div").resizable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
            var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});

Genießen

PS: Zusätzlicher Code zum Erstellen von Fenstern, die bei Auswahl in den Vordergrund der anderen Draggables gestellt werden:

In der ziehbaren Startfunktion -

var maxZ = 1;
$(".AllContainerDivs").each(function (index, element) {
    if ($(element).css("z-index") > maxZ) {
        maxZ = $(element).css("z-index");
    }
});
$(this).css("z-index", maxZ + 1);