jQuery iframeFix sur un triable

Sur mon CMS j'ai une liste de miniatures (Sortable). Les vignettes fonctionnent très bien et maintenant j'écris un plug-in pour les glisser dans une petite fenêtre MCE. Comme la fenêtre tinyMCE possède un iFrame, cela ne fonctionne pas très bien. JQuery a une option pour Draggables appelée iframeFix qui fonctionne exactement comme j'ai besoin. Cependant cette liste doit être un Sortables. J'ai beaucoup regardé sur Google et n'ai trouvé personne avec mes exigences. Est-ce que quelqu'un ici sur StackOverflow l'a fait?jQuery iframeFix sur un triable

Appliquer le iframeFix à un Sortables?

Sinon ... Je suis en route vers un plug-in jQuery.

Merci d'avance!

Source

2009-10-20 Frankie

Je l'ai fait. Vous devez avoir un DIV au-dessus de l'iFrame pour laisser couler le Draggable/Sortable sans problèmes. J'ai donc utilisé jQuery pour créer une DIV juste au-dessus de l'iframe. Ensuite, il montre quand vous prenez l'élément et le détruit quand vous le déposez. Fonctionne comme un charme. Si quelqu'un a besoin de quelque chose comme ça, faites le moi savoir. – Frankie

Vous ne savez pas ce que vous entendez par «au-dessus de l'iframe»? Pouvez-vous poster du code? –

@andybak Avez-vous un problème similaire? TinyMCE s'exécute dans un iFrame ... lorsque vous faites glisser des éléments dans la zone iFrame, la sorte de souris s'arrête sur les limites de l'iFrame pendant un moment, puis continue. Mais du côté de l'utilisateur rend l'interface léthargique. La solution consiste à placer un DIV sur le dessus de l'iFrame dès que vous faites glisser (légèrement plus gros) et vous pouvez ensuite faire glisser à volonté. Après avoir laissé tomber le DIV précédent à n'importe quelle action et votre prêt à partir! – Frankie

Je l'ai fait.

Vous devez avoir un DIV au-dessus du iFrame pour laisser couler le Draggable/Sortable sans problèmes. J'ai donc utilisé jQuery pour créer une DIV juste au-dessus de l'iframe. Ensuite, il montre quand vous prenez l'élément et le détruit quand vous le déposez. Fonctionne comme un charme. Si quelqu'un a besoin de quelque chose comme ça, faites le moi savoir.

mise à jour (demande populaire):

Sur mon scénario spécifique que j'utilise la DIV suivante:

<div id="iframeDivFixer" class="ui-draggable-iframeFix" style="background-color: rgb(255, 255, 255); display: none; width: 665px; height: 665px; position: absolute; opacity: 0.001; z-index: 1000; left: 362px; top: 290px; background-position: initial initial; background-repeat: initial initial;"></div>

Et, dès que je prends la vignette javascript est utilisé pour définir la display propriété à block. Le processus est inversé lorsque vous relâchez le dragabble.

Source

2010-08-25 05:35:19 Frankie

Puis-je rendre l'éditeur droppable avec cette logique? pouvez-vous partager votre code? –

Pouvez-vous montrer l'exemple de code? –

Je voudrais aussi voir comment vous l'avez résolu –

Une question sérieusement ancienne, mais il y a une autre façon de le faire en utilisant css - pointer-events:none; qui est pris en charge sur tous les navigateurs actuellement pris en charge (IE11 et plus - caniuse.com)

$("#sortable").sortable({ 
    start: function() { 
     $("iframe").css("pointer-events", "none"); 
    }, 
    stop: function() { 
     $("iframe").css("pointer-events", ""); 
    }, 
});

Source

2016-05-12 16:16:19 Rycochet

jQuery iframeFix sur un triable

Répondre

Questions connexes