Question

I wanted to know if it is possible to float IFrame out of the browser?
Is it possible to drag the IFrame outside of the browser?

the idea is that my html\js application is like a taskbar and I want that the Iframes will be able to be drag on the top of another programs outside my browser.

thanks,
Dor.

Answer 1

The only application I have seen that can do that is AIR. That said, you can do edge detection and open the iframe content in a new window when it hits the edge if you know the URL

jsFiddle
and accompanying DEMO – as always window.open assumes you allow popups from the site

using jQuery UI draggable:

$("#container").draggable({
  drag: function(event, ui) {
    var offsetXPos = parseInt( ui.offset.left );
    var offsetYPos = parseInt( ui.offset.top );
    $("#coord").text(offsetXPos+'x'+offsetYPos);
    if (offsetXPos===0 || offsetYPos===0) { // be careful with <= since it may trigger many windows
      $("#container").hide();
      window.open('http://msn.com','_blank');
    }
  }
});

<div id="container">
    <div id="handle">Drag me <span id="coord"></span></div>
    <iframe src="http://msn.com/" frameborder=no></iframe>
  </div>
</div>

#container { left:100px; top:100px; width:500px }
#handle { border:1px solid black; height:40px, width:100%; background-color:lightblue; cursor:move; pointer:move}
iframe { width:100%; border:0 }