Tengo un pequeño problema con el jQuery que pueden Arrastrarse IFrameFix.
Tengo un contenedor (como se muestra a continuación) con un iframe dentro de ella. Me volví en el iframeFix en mi la posibilidad de arrastrar la instalación, pero no cambia nada. Cualquier persona que tenía el mismo problema o alguien que pueda saber cómo resolver esto?

<div class="container">
<div class="toolbar">
    <div class="opt1"></div>
    <div class="opt2"></div>
</div>
<iframe src="url" class="frame" frameborder="0" scrolling="no"><p>No support for iframes</p></iframe>
</div>

Esto si mi código javascript.

$(".container").draggable({
        snap: ".snapper_col",
        containment: "#element_container",
        handle: '.opt1',
        snapTolerance: 20,
        iframeFix: true,
        cursor: "crosshair",
        start: function(ev,ui){
        },
        drag: function(ev,ui){

        },
        stop: function(ev, ui){

        }
});

Gracias!

OriginalEl autor jeroenjoosen | 2011-04-12

3 Comentarios

  1. 10

    Resuelto.

    He creado mi propia superposición sobre mi iframe y cuando me empiece a arrastrar mostrar y ocultar cuando me detengo. De esta manera el iframe doensn no meterse con el arrastre.

    muchas gracias por compartir esa sugerencia. Estoy usando jQuery UI diálogo con IFRAME y que estaba causando un sinfín de problemas.
    Haciendo lo mismo ahora. También se informó como un error aquí: bugs.jqueryui.com/ticket/7650
    Muchas gracias, guardar mi día, señor!
    Cualquier buen ejemplo de código de esta solución??
    Yo codificado a cabo Jeroenjoosen la respuesta. Gracias por la solución, funciona. stackoverflow.com/a/24597136/1342440

    OriginalEl autor jeroenjoosen

  2. 2

    Sí, usted puede poner un div sobre el iframe, puedo usar esta función:

    div.draggable{ 
        cancel: '.noDraggable',
        scroll: false,
                appendTo: 'body',
                zIndex: 9999,
                cursor: "move",
                distance: 10,
                iframeFix: true,
    
                start: function(){
                var iframe = $(this).find("iframe");
                    if(iframe.length > 0){
                    div(iframe.parent(), "img/blank.gif", "transparent");  
                    }
                },
    
    
                stop: function(){
                    $(this).find(".capaCargando").remove();
                }
    
    });

    Y esta es la función

    function capaCargando(div, img, color){
                                    if(div.length > 0){
                                        //div.find('.capaCargando').remove();
                                        //aLaConsola(div.find('.capaCargando').length);
                                        if(img == undefined){
                                            img = 'img/uispoty/loadBusqueda.gif';
                                        }
    
                                        if(color == undefined){
                                            color = '#666';
                                        }
    
                                        var w = div.width(),
                                        h = div.height(),
                                        html = "<div class='capaCargando'>"+
                                        "<div class='bgCapaCargando' style='background-color:"+color+"'></div>"+
                                        "<div class='iconoCapaCargando' style='background-image:url("+img+")'></div>"+
                                        "</div>";
                                        div.prepend(html);
                                        var capa = div.find(".capaCargando");
                                        capa.find(".bgCapaCargando, .iconoCapaCargando").width(w).height(h);
                                    }
                               }

    Usted necesita el estudio de este código, porque yo uso este para mi proyecto, con clases y otras cosas, pero seguro que usted entiende el concepto.

    OriginalEl autor ilslabs

  3. 0

    Aquí está el código para ilustrar la respuesta correcta dada por jeroenjoosen encuentra aquí


    CSS

    .frameOverlay {
         height: 100%;
         width: 100%;
         background: rgba(34, 34, 34, 0.5); //transparent is an option or a color
         position: absolute;
         top: 0;
         left: 0;
         display: none;
    }

    HTML

    <div class="frameOverlay"></div> <!--place anywhere within the body -->

    Jquery

    <script>
          $(function() {
            $( "#draggable" ).draggable({
                start: function() {
                    $('.frameOverlay').fadeIn('fast');
                },
                stop: function() {
                    $('.frameOverlay').fadeOut('fast');
                }
            });
          });
    </script>

    OriginalEl autor Brian Dillingham

Dejar respuesta

Please enter your comment!
Please enter your name here