jQuery 可拖动 IFrameFix

Posted 2023-05-08

【中文标题】jQuery 可拖动 IFrameFix

【英文标题】：jQuery Draggable IFrameFix

【发布时间】：2011-08-03 16:31:52

【问题描述】：

我对 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)

        
);

谢谢！

【参考方案1】：

解决了。

我在 iframe 上创建了自己的叠加层，当我开始拖动时，我显示它并在我停止时隐藏它。这样 iframe 就不会拖累。

【讨论】：

非常感谢您分享这个技巧。我正在使用带有 IFRAME 的 jQuery UI 对话框，它导致了无穷无尽的问题。

现在也这样做。它也被报告为这里的错误：bugs.jqueryui.com/ticket/7650

非常感谢，先生，拯救我的一天！

@sirwilliam，我把 Jeroenjoosen 的答案写出来了。感谢您的解决方案，它有效。 ***.com/a/24597136/1342440

【参考方案2】：

是的，你可以在 iframe 上放置一个 div，我使用这个功能：

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

你需要研究这段代码，因为我在我的项目中使用它，包括类和其他东西，但请确保你理解这个概念。

【参考方案3】：

这里有一些代码来说明位于here的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>