doctype [?]
[strict] [loose] [none]

Draggable IFRAME Windows


The purpose of this library is to allow IFRAME objects to be dragged around the screen in the same way that popup windows or draggable DIV tags are often used. Since IFRAME objects always cover form objects, this makes an ideal solution for a simulated "popup window" on a page with form objects.

Including The Script

The dragiframe.js file needs to be included in the master page (which containts the iframes) and each iframe document which will be draggable.

<script type="text/javascript" src="dynamicoptionlist.js"></script>

IFRAME setup

In the main document containing the IFRAMEs, make sure that each iframe tag has a unique ID. For best browser compatability, it is also recommended that the iframe have a name attribute which has the same value as the ID.

In each iframe document itself which is to be dragged, code needs to be added to the body's onLoad handler to assign 'hnadles' in the document from which it can be dragged. This is done by adding an ID to the object which should act as the handle.

Assign the tag with ID 'toolbar' to be a handle
onLoad="addHandle(document.getElementById('toolbar'), window);"
Make the whole body a handle
onLoad="addHandle(document.getElementsByTagName('body').item(0), window);"


In your parent document (containing the IFRAMEs), you may set a couple of options which will affect dragging behavior.


Set to true to always bring the selected IFRAME to the "top" of the zIndex, meaning the iframe being dragged will appear on top of the other iframes. The default is false.



Set to true to allow IFRAME objects to be dragged off the screen. This may make the handle be no longer reachable by the mouse, causing the IFRAME to be stranded.The default is false.



You may manually set this variable to define the highest zIndex used in your main document. This is used to determine what zIndex to give an IFRAME if it is selected and "bringSelectedIframeToTop" is set to true. There is no need to set this variable unless you have very specific HTML code in your document with specific zIndexes, and you want the iframes to be on top of those objects. The default is 99.



  • If you have defined onmousedown or onmouseup event handlers for your "handle" object in the IFRAME, they will be over-written.
  • If you have defined an onmousemove handler in either the main document or the IFRAME document, they will be over-written.
  • All <IFRAME> objects must have an ID!