JQuery déplaçable et redimensionnable sur IFrames (Solution)

Question

J'ai récemment rencontré des problèmes avec les plugins JQuery Draggable et Resizable. À la recherche de solutions, j'ai trouvé un code très fragmenté dans de nombreux endroits différents et finalement classé dans une solution propre qui semble fonctionner presque parfaitement pour moi.

Je pensais que je partagerais mes conclusions pour quelqu'un d'autre, devraient-ils venir à travers ce problème aussi.

J'ai un div qui contient et IFrame. Cette div doit être redimensionnable et glisser. Assez simple - ajouter jquery draggable et redimensionnable à la div comme ceci:

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

Tout va bien jusqu'à ce que vous faites glisser sur une autre div contenant un iframe ou essayez de redimensionner votre div actuelle, en se déplaçant sur votre iframe actuelle. Les deux fonctions s'arrêtent au-dessus d'un iframe.

Solution:

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

Enjoy!

PS: code supplémentaire pour créer des fenêtres qui, lorsqu'il est sélectionné, sont portés à l'avant des autres draggables:

Dans la fonction de démarrage draggable -

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); 

Answer 1

Il y a plusieurs façons pour y parvenir, tout cela en fonction de vos besoins. J'ai trouvé que le redimensionnement/glisser de nombreuses fenêtres ralentit beaucoup l'interface utilisateur, et en tant que tel, j'ai fini par cacher les iframes au début du redimensionnement/Drag avec une bordure pour faciliter la navigation.

Il existe des plugins jquery qui intègrent une partie de cette fonctionnalité, mais beaucoup d'entre eux ont des problèmes avec les iframes.

Le rapprochement peut également être amélioré en points et peut ne pas fonctionner dans toutes les situations.

Answer 2

Essayez ceci:

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

Cela devrait fonctionner.

Answer 3

je suis aussi allé comme la solution de Byron Cobb, mais comme j'utilise un élément de dialogue et l'Iframe n'est pas nécessaire lorsque la boîte de dialogue est affiché (il est un dialogue d'enregistrement), je l'ai aimé utiliser l'option modal:

$('#savingDialog').dialog({ 
    modal: true 
}); 

Answer 4

Pourquoi si difficile? Il y a beaucoup plus belle solution:

• mettre votre iframe dans div par rapport à certains z-index, dire 0
• faire iframe par rapport aussi et le modifier est z-index à -1 lors de glisser:

Code

:

$("#Div").draggable({ 
    start: function() { 
     $("iframe").css('z-index', '-1'); 
    }, 
    stop: function() { 
     $("iframe").css('z-index', '0'); 
    } 
}); 

Answer 5

ce que je l'ai fait est de définir body.dragging iframe {pointer-events: none;} puis ajoutez dragging classe à corps sur dragstart événement et de le retirer de l'événement dragend.

fonctionne bien pour moi, ne sais pas pourquoi il n'a pas été mentionné avant, pour autant que je peux dire pointer-events propriété CSS était déjà autour en 2010.