我的页面上有 2 个 iFrame。两者都可以使用 jQuery UI 进行拖动。如果两个 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"});
最佳答案
您可以指定 stack draggable 中的选项,以便当前拖动的元素位于最前面
$("#iframetest1,#iframetest2").draggable({
containment: "document",
stack: 'div'
});
您还可以使用切换功能而不是 if/else 语句来缩短代码
$(document).ready(function() {
$(".expandorcollapse3").click(function() {
$("#iframetest1").toggle('slow');
});
$(".expandorcollapse4").click(function() {
$("#iframetest2").toggle('slow');
});
});
关于javascript - 多个可拖动的 iFrame,始终将 iFrame 放在首位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13960879/