<HTML>
<HEAD>
<TITLE>아이프레임 드래그</TITLE>
<link rel='stylesheet' type='text/css' href='include/style.css'>
<SCRIPT LANGUAGE="JavaScript">
//-----------------------------
//  원제작자:nzeo의 자바스크립트 스터디 게시판의 멀대님  
//  URL:http://www.nzeo.com/bbs/zboard.php?id=p_javascript&no=189
//  수정: 수정 삽질 전문 kaze;;
//  Home:http://subcase.net
//-----------------------------

//-----------------------------
//  드래그 기본 변수 설정
//-----------------------------
var ifdocDrag = false;                        // 드래그 불/가 를 저장할 논리변수
function docDrag(){                                // 마우스버튼이 눌려진 상태에서 드래그를 준비하는 함수
  ifdocDrag = true;                        // 드래그 '가능'
  originXtitle = titlebar.style.pixelLeft;        //원래의 타이틀바 X 좌표 (스타일에서의 'left')
  originYtitle = titlebar.style.pixelTop;                //원래의 타이틀바 T 좌표 (스타일에서의 'top')
  originXdoc = document.all['docFrame'].style.pixelLeft;        // 원래의 IFRAME X좌표 (스타일에서의 'left')
  originYdoc = document.all['docFrame'].style.pixelTop;        // 원래의 IFRAME Y좌표 (스타일에서의 'top')
  tempX = self.event.clientX;                                // 이벤트(mousedown)이 발생한 지금의 마우스 X좌표
  tempY = self.event.clientY;                                // 이벤트(mousedown)이 발생한 지금의 마우스 Y좌표
  document.onmousemove = docMove;                        // mousemove 이벤트 발생시(마우스 움직일때) docMove 함수 호풀
  document.onmouseup = new Function("ifdocDrag = false");        //mouseup 이벤트 발생시(마우스버튼이 띄어질때) 드래그 '불가'로
}

//-----------------------------
//  실제 드래그
//-----------------------------
function docMove(){                // 실제 IFRAME을 움직이는 함수
  if(ifdocDrag){                // 드래그 '가능'일때  
    titlebar.style.pixelLeft = originXtitle + self.event.clientX - tempX;
    // 타이틀바 X좌표는= [원래X] + [현재마우스의X] - [클릭한순간의(mousedown발생했을때의)마우스X]
    titlebar.style.pixelTop = originYtitle + self.event.clientY - tempY;
    // 타이틀바 Y좌표는= [원래Y] + [현재마우스의Y] - [클릭한순간의(mousedown발생했을때의)마우스Y]
    document.all['docFrame'].style.pixelLeft = originXdoc + self.event.clientX - tempX;
    // IFRAME의 Y좌표는= [원래Y] + [현재마우스의Y] - [클릭한순간의(mousedown발생했을때의)마우스Y]
    document.all['docFrame'].style.pixelTop = originYdoc + self.event.clientY - tempY;
    // IFRAME의 Y좌표는= [원래Y] + [현재마우스의Y] - [클릭한순간의(mousedown발생했을때의)마우스Y]    
    //우측으로 넘어가면
    if(titlebar.style.pixelLeft+titlebar.style.pixelWidth > document.body.clientWidth) {      
      titlebar.style.pixelLeft=document.body.clientWidth-titlebar.style.pixelWidth-1;
      document.all['docFrame'].style.pixelLeft=document.body.clientWidth-document.all['docFrame'].style.pixelWidth-2;
    }
    //좌측으로 들어가면
    if(titlebar.style.pixelLeft<0) {
      titlebar.style.pixelLeft=1;
      document.all['docFrame'].style.pixelLeft=2
    }    
    //하단으로 넘어가면
    if(titlebar.style.pixelTop+titlebar.style.pixelHeight > document.body.clientHeight) {      
      titlebar.style.pixelTop=document.body.clientHeight-titlebar.style.pixelHeight-1;
      document.all['docFrame'].style.pixelTop=document.body.clientHeight-document.all['docFrame'].style.pixelHeight-2;
    }
    //상단으로 들어가면
    if(titlebar.style.pixelTop<0) {
      titlebar.style.pixelTop=1;
      document.all['docFrame'].style.pixelTop=31
    }
  }
}

//-----------------------------
//  아이프레임 보이기
//-----------------------------
function showIframe(url,width,height) {
  document.all['docFrame'].src=url;
  if(width) document.all['docFrame'].style.pixelWidth=width;
  if(height) document.all['docFrame'].style.pixelHeight=height;  
  //위치를 중앙으로 지정
  document.all['docFrame'].style.pixelLeft = (document.body.clientWidth-document.all['docFrame'].style.pixelWidth)/2;
  document.all['docFrame'].style.pixelTop = (document.body.clientHeight-document.all['docFrame'].style.pixelHeight)/2;
  //타이틀 바가 아이프레임을 감싸도록 위치와, 크기 지정
  titlebar.style.pixelLeft=document.all['docFrame'].style.pixelLeft-1;
  titlebar.style.pixelTop=document.all['docFrame'].style.pixelTop-30;
  titlebar.style.pixelWidth=document.all['docFrame'].style.pixelWidth+2;
  titlebar.style.pixelHeight=document.all['docFrame'].style.pixelHeight+31;
  
  titlebar.style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다. 
  titlebar.filters.blendTrans.apply(); 
  titlebar.style.visibility = 'visible'; 
  titlebar.filters.blendTrans.play();
  
  document.all['docFrame'].style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다. 
  document.all['docFrame'].filters.blendTrans.apply(); 
  document.all['docFrame'].style.visibility = 'visible'; 
  document.all['docFrame'].filters.blendTrans.play();
  //titlebar.style.visibility = 'visible';
  //setTimeout("document.all['docFrame'].style.visibility = 'visible';",500);
} 

//-----------------------------
//  아이프레임 감추기
//-----------------------------
function hideIframe() {
  titlebar.style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다. 
  titlebar.filters.blendTrans.apply(); 
  titlebar.style.visibility = 'hidden'; 
  titlebar.filters.blendTrans.play();
  
  document.all['docFrame'].style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다. 
  document.all['docFrame'].filters.blendTrans.apply(); 
  document.all['docFrame'].style.visibility = 'hidden'; 
  document.all['docFrame'].filters.blendTrans.play();
  
  //titlebar.style.visibility = 'hidden';
  //document.all['docFrame'].style.visibility = 'hidden';
}

//-----------------------------
//  타이틀바, 아이프레임 출력
//-----------------------------
with(document){
  //타이틀 바  
  writeln("<div id='titlebar' style='position:absolute;left:0;top:0;width:0px;height:0px;z-index:0;visibility:hidden'>");
  writeln("<table width='100%' Height=100% cellpadding=0 cellspacing=1 border=0 bgColor=BAB17C>");
  writeln("<tr height=28>");
  writeln("<td bgcolor=000000>");
  writeln("<table width=100% cellpadding=5 cellspacing=0>");
  writeln("<tr>");
  writeln("<td onmousedown='docDrag()'  style=cursor:hand>");
  writeln("<img src=img/res_ovr.gif align=absmiddle>");
  writeln("</td>");
  writeln("<td width=20 align=right style=cursor:hand>");
  writeln("<span onclick='hideIframe()'><img src=img/close_ovr.gif align=absmiddle></span>");
  writeln("</td>");
  writeln("</tr>");
  writeln("</table>");
  writeln("</td>");
  writeln("<tr>");
  writeln("<td bgcolor=000000 valign=top>");
  writeln("<span class=scrollbox></span>");
  writeln("</td>");
  writeln("</tr>");
  writeln("</table>");
  writeln("</div>");
  //아이 프레임
  writeln("<iframe  name='docFrame'  id='docFrame' style='position:absolute;left:0;top:0;width:0px;height:0px;z-index:1;visibility:hidden' src='http://oxtag.com/html/marquee.html' border=0 frameborder=0 scrolling=no></iframe>");
}
</SCRIPT>
</HEAD>

<BODY  ondragstart='return false' onselectstart='return false' unselectale=on style="margin-right:0;" marginwidth=0 bgcolor="#000000">
<span onclick=javascript:showIframe('http://oxtag.com/html/marquee.html',750,500) style=cursor:hand;color:ffffff>700x500 사이즈</span><br>
<span onclick=javascript:showIframe('http://oxtag.com/html/marquee.html') style=cursor:hand;color:ffffff>사이즈를 정의하지 않았을 때</span><br>
<span onclick=javascript:showIframe('http://oxtag.com/html/marquee.html',500,400) style=cursor:hand;color:ffffff>500x400 미니위니</span><br>

</bODY>
</HTML>