多個可拖拽iFrames，始終讓iFrame聚焦於頂部

我的頁面上有2個iFrame。兩者都可以使用jQuery UI拖動。如果兩個iFrame被拖動到相同的空間上，那麼加載第二個的iFrame總是占主導地位。它涵蓋了第一個iFrame。有沒有辦法將iFrame設置爲主流iFrame的焦點，這樣，如果我將第一個iFrame移動到第二個iFrame上，它將覆蓋第二個幀，反之亦然？多個可拖拽iFrames，始終讓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

來源

2012-12-19 Lloyd Banks

您縮短代碼可以嘗試將「頂部」iframe移動到最後一個iframe之後，以便獲得焦點http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom – technosaurus

您可以指定拖動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/

來源

2012-12-19 21:44:10

多個可拖拽iFrames，始終讓iFrame聚焦於頂部

回答

相關問題