Lots of dragged iFrames, always have the iFrame in focus.

Question

I have 2 iFrames on my page. Both of them are dragged using jQuery UI. The IFrame that loads the second is always dominant if both iFrames are dragged over the same space, i.e. It closes the first iFrame. Is there a way to set the iFrame in focus as the dominant iFrame so that if I move the first iFrame and move it to the second iFrame, it will span the second frame and vice versa?

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

See jsFiddle here

Answer 1

You can specify the stack option in draggable so that the current drag and drop item moves to the front

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

You can also shorten the code using a switch function, instead of having if / else statements

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

http://jsfiddle.net/nwu4Q/