jQuery Draggable IFrameFix

13,753

Solution 1

Solved it.

I created my own overlay over my iframe and when I start dragging I display it and hide it when I stop. This way the iframe doensn't mess with the dragging.

Solution 2

Yes, you can put a div over the iframe, i use this function:

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

});

And this is the function

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

You need study this code because i use this for my project, with clases and other things, but sure you understand the concept.

Share:
13,753

Related videos on Youtube

jeroenjoosen
Author by

jeroenjoosen

Updated on June 04, 2022

Comments

  • jeroenjoosen
    jeroenjoosen over 1 year

    I have a little problem with the jQuery Draggable IFrameFix. I have a container (as shown below) with an iframe inside of it. I turned on the iframeFix in my draggable setup, but it doesn't change a thing. Anyone who had the same problem or anyone who might know how to solve this?

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

    This if my javascript code.

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

    Thanks!

  • Lea Hayes
    Lea Hayes over 12 years
    thank you so much for sharing that tip. I am using jQuery UI dialog with IFRAME and it was causing endless problems.
  • Erik Dekker
    Erik Dekker over 11 years
    Doing the same now. It was also reported as a bug here: bugs.jqueryui.com/ticket/7650
  • Tony Dinh
    Tony Dinh almost 10 years
    Thank you so much, save my day, sir!
  • im_brian_d
    im_brian_d over 9 years
    @sirwilliam, I coded out Jeroenjoosen's answer. Thanks for the solution, it works. stackoverflow.com/a/24597136/1342440

Related