JQuery Перетаскиваемый IFrameFix

У меня небольшая проблема с jQuery Draggable IFrameFix. У меня есть контейнер (как показано ниже) с iframe внутри него. Я включил iframeFix в своей перетаскиваемой настройке, но это ничего не меняет. У кого была такая же проблема или может кто знает как решить?

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

Это если мой код 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){

        }
});

Спасибо!


jquery jquery-ui jquery-ui-draggable jquery-plugins
person jeroenjoosen    schedule 12.04.2011    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Решил это.

Я создал свое собственное наложение поверх своего iframe, и когда я начинаю перетаскивать, я отображаю его и скрываю, когда останавливаюсь. Таким образом, iframe не мешает перетаскиванию.

person jeroenjoosen    schedule 13.04.2011
comment
Большое спасибо за то, что поделились этим советом. Я использую диалог пользовательского интерфейса jQuery с IFRAME, и это вызывает бесконечные проблемы. - person Lea Hayes; 22.07.2011
comment
Делаю то же самое сейчас. Здесь также сообщалось об ошибке: bugs.jqueryui.com/ticket/7650. - person Erik Dekker; 14.06.2012
comment
Большое спасибо, спасите мой день, сэр! - person TrungDQ; 01.02.2014
comment
@sirwilliam, я закодировал ответ Jeroenjoosen. Спасибо за решение, оно работает. stackoverflow.com/a/24597136/1342440 - person im_brian_d; 06.07.2014

arrow_upward
2
arrow_downward

Да, вы можете поместить div поверх iframe, я использую эту функцию:

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

});

И это функция

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

Вам нужно изучить этот код, потому что я использую его для своего проекта, с классами и другими вещами, но убедитесь, что вы понимаете концепцию.

person ilslabs    schedule 15.09.2011

arrow_upward
0
arrow_downward

Вот некоторый код, иллюстрирующий правильный ответ, данный jeroenjoosen, расположенным здесь


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>



person im_brian_d    schedule 06.07.2014