jQuery Draggable IFrameFix

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"&g开发者_如何转开发t;</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!

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.

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.

Here is some code to illustrate the correct answer given by jeroenjoosen located here

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>