多个可拖动的iFrame,总是让iFrame成为焦点

Question

我的页面上有2个iFrame.两者都可以使用jQuery UI进行拖动.如果两个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

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

http://jsfiddle.net/nwu4Q/\n\xe2\x80\x8b​

\n