多个可拖动的 iFrame，始终让 iFrame 成为焦点

Posted 2023-03-06

【中文标题】多个可拖动的 iFrame，始终让 iFrame 成为焦点

【英文标题】：Multiple Draggable iFrames, Always Have iFrame in Focus Be On Top

【发布时间】：2012-12-07 07:21:31

【问题描述】：

我的页面上有 2 个 iFrame。两者都可以使用 jQuery UI 进行拖动。如果两个 iFrame 都被拖动到相同的空间上，则第二个加载的 iFrame 始终是主要的 iFrame，即。它覆盖了第一个 iFrame。有没有办法将焦点 iFrame 设置为主要 iFrame，这样如果我移动第一个 iFrame 并将其放在第二个 iFrame 上，它将覆盖第二个 iFrame，反之亦然？

html：

<a class = 'expandorcollapse3' href = '#'>Web Page 1</a>
<br>
<a class = 'expandorcollapse4' href = '#'>Web Page 2</a>

<div id = 'iframetest1' style = 'display: none'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></a></div>
<div id = 'iframetest2' style = 'display: none'>
      <iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></a></div>

CSS：

#iframe1 width: 600px; height: 500px; border; 1px solid black; zoom: 1.00; -moz-transform: scale(0.65); -moz-transform-orgin: 0 0;
         -o-transform: scale(0.65); -o-transform-origin: 0 0; -webkit-transform: scale(0.65); -webkit-transform-origin: 0 0;

#iframetest1 width: 390px; height: 325px; margin: 10px; border-style: solid; border-width: 10px;    

#iframetest2 width: 390px; height: 325px; margin: 10 px; border-style: solid; border-width: 10px;

javascript：

$(document).ready(function()
    $(".expandorcollapse3").click(function()
        if($("#iframetest1").is(":hidden"))
            $("#iframetest1").show("slow");
            
        else
            $("#iframetest1").hide("slow");
            
        );
    );

$(document).ready(function()
    $(".expandorcollapse4").click(function()
        if($("#iframetest2").is(":hidden"))
            $("#iframetest2").show("slow");
            
        else
            $("#iframetest2").hide("slow");
            
        );
    );

$("#iframetest1").draggable(containment: "document");
$("#iframetest2").draggable(containment: "document");

见jsFiddle here

【问题讨论】：

当它获得焦点时，您可以尝试将“顶部”iframe 移动到最后一个 iframe 之后 ***.com/questions/1363650/…

【参考方案1】：

您可以在draggable中指定stack选项，以便当前拖动的元素到前面

$("#iframetest1,#iframetest2").draggable(
    containment: "document",
    stack: 'div'
);

您还可以使用切换功能来缩短代码，而不是使用 if/else 语句

$(document).ready(function() 
    $(".expandorcollapse3").click(function() 
        $("#iframetest1").toggle('slow');
    );
    $(".expandorcollapse4").click(function() 
        $("#iframetest2").toggle('slow');
    );
);

http://jsfiddle.net/nwu4Q/ ​