JavaScript 드래그 가능한 iframe 효과 code_javascript 기술

// HISTORY
// ------------------------------------------------------------------
// Jan 23, 2004: Fixed problems which caused the script not to work in
//               some framed situations. Improved browser support.
//               Added easier "addHandle" implentation.
// May 25, 2003: Added better event position detection, added caching
//               of IFRAME object references to avoid lookups. Added
//               'move' cursor to handles.
// May 24, 2003: Updated to fix bug with Netscape 7.x
// May 23, 2003: Created
/* 
DESCRIPTION: 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.

COMPATABILITY: Tested successfully with IE 6.x, Netscape 6.2, 7.x, and
Mozilla 1.3. Since this script uses IFRAME objects and DHTML heavily, 
cross-browser compatability is a goal but there may be some quirks in 
various browser versions.

USAGE:
1) Include the source file in your main document which contains the IFRAME
   tags. Make sure each iframe has a unique "ID" attribute. For best browser
   compatability, also include a "NAME" attribute in the IFRAME tag that
   has the same value as the "ID" attribute.

2) In the document content of each IFRAME which will be draggable, , do two
    things:
    a) Include the dragiframe.js file in the source
    b) add this code to the 

 tag:
   onLoad="addHandle(document.getElementById('toolbar'), window);"
   Where 'toolbar' is the ID of an element on the page which should be the 'handle'
   by which the IFRAME should be dragged (like a toolbar at the top).
   If you want the IFRAME to be draggable by clicking anywhere in the IFRAME
   document, use:
   onLoad="addHandle(document.getElementsByTagName('body').item(0), window);"

   NOTE: The code will automatically look up the window.parent tree to find a
   parent document with draggable iframes enabled. It will attach itself to the
   first document it finds, allowing it to work within a framed environment.

In your parent document (containing the IFRAMEs), you may set a couple of options:

// Set to true to always bring the selected IFRAME to the "top" of the zIndex.
// Defaults to false
bringSelectedIframeToTop(true|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
// 엉키게 됩니다.
// 기본값은 false
allowDragOffScreen(true|false);

// 이 변수를 수동으로 설정하여
//에서 사용되는 가장 높은 zIndex를 정의할 수 있습니다. 기본 문서입니다. 이는 IFRAME
//이 선택되고 "bringSelectedIframeToTop"이 true로 설정된 경우 zIndex가 무엇인지 결정하는 데 사용됩니다.
// 기본값은 99입니다.
DIF_highestZIndex=4;

참고:
1) IFRAME의 "핸들"
개체에 대해 onmousedown 또는 onmouseup 이벤트 핸들러를 정의한 경우 덮어쓰게 됩니다.
2) onmousemove 핸들러를 정의한 경우 기본 문서 또는
IFRAME 문서를 덮어쓰게 됩니다.
3) 모든