JQuery Draggable Handler à l'intérieur IFrame

Quelle bouchée. Fondamentalement, j'ai un parent <div> et à l'intérieur un . J'ai besoin d'un élément à l'intérieur de l'iframe pour être le handle pour faire glisser le div parent. Est-ce seulement possible?JQuery Draggable Handler à l'intérieur IFrame

J'ai essayé:

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')); 
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

Il vise le droit élément DOM, mais il ne veut pas traîner. Il est peut-être possible de superposer une aoc de div cachée de l'iframe mais j'ai trouvé que l'iframe prend l'événement sur le div quand la position est absolue. Étrange.

Source

2010-08-06 Louis

Dragable avec iFrameFix était encore laggy pour moi. Dialog a mieux fonctionné, si un dialogue est une solution acceptable. C'est encore draggable mais aussi fermable. – user420667

J'ai décidé de faire un coup de poignard à ce sujet et à mon garçon, c'est beaucoup de travail avec peu de progrès en utilisant un nœud interne iframe comme un handle. Quoi qu'il en soit, voici deux solutions, la première ne fonctionne pas très bien, mais si vous pouvez le faire fonctionner, il peut être plus souhaitable.

main.html (plagié de la démo)

<div id="draggable" class="ui-widget-content" style="position:relative;"> 
    <p class="ui-widget-header">I can be dragged only by this handle</p> 
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe> 
</div>

intérieur-handle.html

<html> 
    <head> 
     <script type="text/javascript" src="../../jquery-1.4.2.js"></script> 
    </head> 
    <body> 
     <div id="innerHandle">handle</div> 
    </body> 
</html>

JavaScript

$(function() { 
    var moveEvent; 
    $(document).mousemove(function (e) { 
     moveEvent = e; 
    }); 

    $("#draggable").draggable(); 
    $('iframe', '#draggable').load(function() { 
     $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) { 
      $('#draggable').draggable().data('draggable')._mouseDown(moveEvent); 
      return false; 
     }); 
    }); 
});

Il m'a fallu un certain temps pour trouver quelque chose qui " travaillé." Le problème ici était que puisque l'événement mousedown se produisait sur un élément à l'intérieur de l'iframe, l'événement mouse est relatif à l'iframe, pas au document principal. La solution consiste à avoir un événement move sur le document et à saisir la position de la souris à partir de là. Le problème, encore une fois, est que si la souris est à l'intérieur de l'iframe, elle ne bouge pas selon le document parent. Cela signifie que l'événement glisser ne se produit que lorsque la souris atteint le bord de l'iframe dans le document parent.

Une solution de contournement pour cela pourrait être de générer manuellement des événements avec la position calculée de l'iframe par rapport à son mouvement de la souris. Ainsi, lorsque votre souris se déplace dans l'iframe, calculez son mouvement en utilisant la coordonnée de l'iframe au document parent. Cela signifie que vous devez utiliser l'événement de la mousedown et non le mousemove,

$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) { 
    // do something with e 
    $('#draggable').draggable().data('draggable')._mouseDown(e); 
    return false; 
});

La deuxième solution est la façon dont vous l'avez mentionné, ont un div positionné absolu sur l'iframe lui-même.Je n'ai pas du mal à obtenir le div être au-dessus de l'iframe, qui est,

<div id="draggable" class="ui-widget-content" style="position:relative;"> 
    <p class="ui-widget-header">I can be dragged only by this handle</p> 
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe> 
    <div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div> 
</div>

Le problème avec votre div être derrière l'iframe peut-être parce que le z-index est désactivé. Si vous déclarez votre div avant le iframe et que vous n'avez pas spécifié l'index z, alors l'iframe sera en haut. De toute façon, bonne chance!

Source

2010-08-12 23:35:18

Woah merci pour votre travail acharné. Je pense que je vais essayer la deuxième solution. Le premier serait trop bogué je pense. Merci beaucoup! – Louis

ce qui se passe quand vous faites cela (avec firebug activé):

var frameContent = $('iframe',node).contents() 
var handle = frameContent.find('#handle'); 
console.debug(frameContent, handle)

Est-ce que handle contient une liste d'éléments? Et si oui, regardez attentivement l'objet Document qui est frameContent - est l'URL "about:blank"? C'est juste une intuition, mais si vous obtenez ces sorties, c'est probablement l'exécution du sélecteur jQuery avant le contenu du cadre a été chargé (c'est-à-dire avant que l'élément #handle existe). Dans ce cas, vous pouvez ajouter un événement au document IFRAME et communiquer avec le cadre parent via window.parent.

Source

2010-08-09 18:41:35 Adam

Impossible de tester maintenant, donc j'essaierai bientôt mais je change l'option sur window.onload dans l'iframe donc je suppose qu'il est prêt. Lorsque je connecte le contenu de ce qui est trouvé, c'est l'élément DOM correct. Peut-être que ce n'est tout simplement pas possible. – Louis

essayer

$ ('# Div') draggable ({iframeFix: true}). Cela devrait fonctionner

Source

2010-11-17 09:31:36 vishal

Génie! Merci beaucoup! – mateuscb

JQuery Draggable Handler à l'intérieur IFrame

Répondre

Questions connexes