Probleme bei der Verwendung von JQuery UI.Resizable() und UI.Draggable() mit einem iFrame

Question

Ich versuche, ein Dialogfenster mit JQuery zu erstellen. Ich mache Fortschritte so weit, aber läuft in einige Probleme w / der iframe... Ich weiß, dass iframes in der Regel auf verpönt sind, aber sie sind die einzigen Dinge, die die Anforderungen des Projekts erfüllen werden.

Wie auch immer, ich kann erfolgreich implementieren die Größe und Draggable-Plugins, aber ich laufen in Probleme, wenn der Benutzer zu schnell zieht und Mäuse über den Iframe, die in der inneren div des Dialogs enthalten ist. Etwas schwierig zu erklären, aber der Code unten sollte helfen, zeigen, was passiert.

Es scheint fast so, als ob der Iframe den Fokus des Mousedown-Ereignisses stiehlt, sobald die Maus den Iframe überquert. Ich frage mich, ob es eine Möglichkeit gibt, dies zu umgehen.

Danke! Chris

<div id="container" style="border: solid 1px Black; padding: 10px 10px 10px 10px; height: 520px; width: 420px;">
    <iframe id="if" src="http://google.com" style="width: 400px; height: 500px;"></iframe>
</div>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript">

$(document).ready(function()
    {
        $("#container").draggable();
        $("#container").resizable(
            {
                alsoResize: "#if"
            }
        ).parent().draggable();
    }
);

EDIT: Um die Anwendung auszuführen, müssen die Jquery-Dateien, auf die im Code verwiesen wird, heruntergeladen werden. Der Code sollte jedoch mit früheren Versionen abwärtskompatibel sein.

EDIT: Ich habe den Code ein wenig geändert, um die Dinge ein wenig zu vereinfachen.

EDIT: Ich habe eine alternative Methode gefunden, um dieses Problem zu lösen, indem ich die Prototyp-Fenster Bibliotheken. Ich würde viel lieber jQuery über Prototyp verwenden, da viele der Benchmarks viel besser sind, aber aufgrund meiner Zeitknappheit die Prototyp-Route wird tun. Ich bin immer noch daran interessiert, dies herauszufinden, aber wenn jemand einige Ratschläge hat. Nochmals vielen Dank für all Ihre Hilfe.

EDIT: Wenn ich den iframe in ein div ändere, funktioniert der obige Code einwandfrei. Das Problem scheint nur die Art und Weise zu sein, dass die ziehbaren und größenveränderbaren Erweiterungen funktionieren, wenn ein iframe beteiligt ist.

Answer 1

@aleemb: Ich glaube nicht, dass es das ist, wovon er spricht. Ich glaube, das Problem ist der Iframe und nicht die Kombination aus Draggable und Resize.

@regex: Ich habe das gleiche Problem und es manifestierte sich auch mit einer früheren Implementierung mit dem Prototyp-Toolkit.

Meine Implementierung verwendet einen Iframe als Leinwand, auf der Draggables abgelegt werden können. Sie können den Fehler sehen, wenn Sie Ihre Maus zu schnell bewegen, so dass der Cursor den Rand des DIVs verlässt, das Sie ziehen können. Das DIV hört auf, sich zu bewegen, und die Maus läuft weiter. Wenn Sie die Maus wieder auf die Oberfläche des DIVs bewegen, nimmt sie das DIV wieder auf und beginnt sich zu bewegen, auch wenn Sie den Mausklick losgelassen haben.

Mein Verdacht ist, dass die Iframe-Ereignisse irgendwie mit den Jquery-Ereignissen interferieren.

Meine Lösung war, ein transparentes DIV-Tag zwischen dem Iframe und den Draggables/Resizables zu platzieren.

Auf diese Weise sieht der iframe nie die Mausbewegung und stört somit nicht.

EDIT: Siehe Codebeispiel: http://dpaste.com/hold/17009/

Wes

UPDATE! Ich habe dieses Problem erneut untersucht und der iframeFix scheint in allen Browsern für die Draggables gut zu funktionieren, aber die Resizables haben nicht den entsprechenden Fix.

Ich habe diesen Code verwendet, um manuell eine Maske DIV hinzuzufügen:

$elements.resizable({ //mark it as resizable
    containment: "#docCanvas",
    start: function(event, ui) {
        //add a mask over the Iframe to prevent IE from stealing mouse events
        $j("#docCanvas").append("<div id=\"mask\" style=\"background-image:url(images/spacer.gif); position: absolute; z-index: 2; left: 0pt; top: 0pt; right: 0pt; bottom: 0pt;\"></div>");
    },
    stop: function(event, ui) {
        //remove mask when dragging ends
        $j("#mask").remove();
    }
});

Und das HTML:

<div id="docCanvas" style="position: relative;">
    <iframe src="something.html"></iframe>
</div>

spacer.gif ist ein 1x1 Pixel großes transparentes gif.

Dies behebt das Problem für IE7 und IE8. IE6 hat Probleme mit z-index und kann nicht herausfinden, dass das DIV zwischen dem IFrame und dem größenveränderlichen DIV liegen sollte. Ich habe den IE6 aufgegeben.

Wes

Answer 2

Das gleiche Problem trat auf Problem der Größenänderung/Redraggierung kürzlich.

// this will make <div id="box"> resizable() and draggable()
$('#box').resizable().parent().draggable();

// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();

Answer 3

Nachdem ich eine ähnliche Lösung wie die von @wes vorgeschlagene verwendet hatte, fand ich eine einfachere Lösung, für die kein Javascript-Code erforderlich ist. Fügen Sie einfach das Folgende zu Ihrem CSS hinzu:

.ui-resizable-resizing:after
{
    content: '';
    position: absolute; 
    z-index: 999; 
    left: 0px; 
    top: 0px; 
    right: 0px;
    bottom: 0px;
}

Sobald der Benutzer die Größe ändert, fügt jQuery die Klasse .ui-resizable-resizing hinzu, und ein Overlay wird hinzugefügt. Beachten Sie, dass Sie "position: relative" auf das geänderte Objekt benötigen.

Answer 4

Ich glaube, Sie können dies auch beheben, indem Sie den Parameter "iframeFix" zur Initialisierung des Draggables hinzufügen, wie in den Dokumenten unter "Optionen" beschrieben http://jqueryui.com/demos/draggable/

Answer 5

Leider gibt es ein Problem mit dem iframeFix, dass es schwierig ist, die transparenten Divs wieder freizugeben, wenn sie einmal gezogen werden können. Ich hatte zuvor eine andere, stärkere Version geschrieben, aber leider habe ich den Code verloren... Wenn ich es schaffe, das Problem zu lösen, werde ich meinen Code erneut posten.

EDIT: OK, ich habe einen manuellen, aber besseren Weg gefunden, es zu tun... zumindest in meinem Fall

Sie erstellen weiterhin ein transparentes Div über dem Container des iframe, wenn das enthaltende Div angeklickt wird (onmousedown). Dieses transparente div ist top:-90% positioniert, was es über den iframe bringen sollte (abhängig von Ihrem Styling kann es mehr wie top:-100%; sein). Auf der onmouseupEvent des transparenten div, fügen Sie den Code, um die transparente divs zu entfernen.

JSFUNCTIONS function coverIframes() { $(".normalWindow").append(""); }

function uncoverIframes() {
    $(".cover").remove();
}

CSS-Styling für transparente div div.cover { width:100%; Höhe:100%; oben:-90%; position:relative; }

Beispiel HTML