Problème lors de l'utilisation de JQuery UI.Resizable() et UI.Draggable() avec un iFrame

Question

J'essaye de créer une fenêtre de dialogue en utilisant JQuery. Je fais des progrès jusqu'à présent, mais je rencontre des problèmes avec l'iframe ... Je sais que les iframes sont généralement mal vues, mais ce sont les seules choses qui répondent aux exigences du projet.

Quoi qu'il en soit, je peux implémenter avec succès les plugins redimensionnables et draggables, mais je rencontre des problèmes si l'utilisateur ralentit et survole l'iframe contenu dans la div interne de la boîte de dialogue. Un peu difficile à expliquer, mais le code ci-dessous devrait aider à montrer ce qui se passe.

Il semble presque qu'une fois que la souris passe au-dessus de l'iframe, l'iframe vole le focus de l'événement mousedown. Je me demande s'il y a un moyen de contourner cela. Pour exécuter le:

Merci, 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 app, les fichiers jquery référencés dans le code devront être téléchargés. Le code devrait être rétrocompatible avec les versions précédentes.

EDIT: J'ai légèrement modifié le code pour simplifier un peu les choses. J'ai trouvé une méthode alternative pour résoudre ce problème en utilisant les bibliothèques prototype-window. Je préfèrerais utiliser jQuery plutôt que le prototype, car beaucoup de benchmarks sont beaucoup mieux, mais en raison de mon temps critique, la route protype fera l'affaire. Je suis toujours intéressé à comprendre cela si quelqu'un a des conseils. Merci encore pour votre aide.

EDIT: Si je change le iframe en div, le code ci-dessus fonctionne parfaitement. Le problème semble seulement être la manière dont les extensions draggable et redimensionnable fonctionnent quand iframe est impliqué.

Answer 1

@aleemb: Je ne crois pas que ce soit ce dont il parle. Je crois que le problème est l'Iframe et non la combinaison du draggable et redimensionnable.

@regex: J'ai le même problème et il s'est également manifesté avec une implémentation antérieure en utilisant le toolkit prototype. Mon implémentation utilise un Iframe comme une toile sur laquelle déposer des glisser-déposer. La façon dont vous pouvez voir le bug est de déplacer votre souris trop rapidement de sorte que le curseur quitte le bord de la DIV traînable. Le DIV arrête de bouger et votre souris continue à avancer; En déplaçant votre souris à la surface de la DIV, il reprend la DIV et commence à bouger même si vous avez relâché le clic de votre souris. Je soupçonne que les événements Iframe interfèrent d'une manière ou d'une autre avec les événements jquery.

Ma solution était de positionner un tag DIV transparent entre l'Iframe et les draggables/resizables.De cette manière, l'iframe ne voit jamais le mouvement de la souris et, en tant que tel, n'interfère pas.

EDIT: Voir l'exemple de code: http://dpaste.com/hold/17009/

Wes

MISE A JOUR! J'ai revisité ce problème et le iframeFix semble fonctionner dans tous les navigateurs pour les draggables, mais les resizables n'ont pas le correctif équivalent.

J'ai utilisé ce code pour ajouter manuellement un masque DIV:

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

Et le code HTML:

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

spacer.gif est un pixel 1x1 GIF transparent.

Cela résout le problème pour IE7 & IE8. IE6 a des problèmes avec z-index et n'arrive pas à comprendre que le DIV doit être entre le IFrame et le DIV redimensionnable. J'ai abandonné IE6.

Wes

Answer 2

Récemment passé dans le même resizable/redraggable problem.

// 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

Je crois que vous pouvez également résoudre ce problème en ajoutant le paramètre « iframeFix » à l'initialisation draggable tel que décrit dans la documentation sous « Options » http://jqueryui.com/demos/draggable/

Answer 4

Malheureusement, il y a un problème avec le iframeFix en qu'il est difficile de libérer les divs transparents une fois qu'ils sont déplaçables. J'avais écrit une autre version plus forte avant mais malheureusement j'ai perdu le code ... Si je parviens à résoudre le problème je relaterai mon code.

EDIT: OK, j'ai travaillé un manuel, mais une meilleure façon de le faire ... au moins dans mon cas

Vous créez toujours un div transparent sur le dessus du conteneur du iframe lorsque la div contenant est cliqué (onmousedown). Ce div transparent est positionné en haut: -90%, ce qui devrait l'amener au-dessus de l'iframe (en fonction de votre style, il peut être plus proche de top: -100%;). Sur l'onmouseupEvent de la div transparente, vous ajoutez le code pour supprimer les divs transparents.

JSFUNCTIONS Fonction coverIframes() { $ (".normalWindow"). Append (""); }

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

style CSS pour div transparent div.cover {width: 100%; hauteur: 100%; en haut: -90%; position: relative; }

Exemple HTML

Answer 5

essayer cette

$ ('# Div').draggable ({iframeFix: true});

cela devrait fonctionner

http://docs.jquery.com/UI/API/1.8/Draggable

Answer 6

Après avoir utilisé une solution similaire à celle proposée par @wes, j'ai trouvé un plus simple, sans code javascript requis. Il suffit d'ajouter ce qui suit à votre CSS:

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

Une fois que l'utilisateur commence à redimensionner, jQuery ajoute la classe .ui-redimensionnable-Redimensionnement et un recouvrement est ajouté. Notez que vous aurez besoin de "position: relative" sur l'objet redimensionné.