프리랜서 웹디자이너 무료폰트 RELATION.CO.KR

RELATION 로고

홈페이지 소스

[SCRIPT] 팝업(레이어 드레그)

2010.05.03
<!-- 소스 -->

<script language="JavaScript">
<!--
var cpt_val = false; // 레이어 캡쳐 여부
var cpt_layer = null; // 캡쳐된 레이어 객체
var esX, esY; // 시작 이벤트 위치
var zIdx = 100; // 시작 z-index 값
// IE 구분
var is_ie = (navigator.userAgent.indexOf("MSIE") != -1) ? true :false;

// 마우스 다운 이벤트시 레이어 캡쳐
function capture(obj_id, evt) {
var evt = evt ? evt : event;

cpt_layer = document.getElementById(obj_id);
zIdx++;
cpt_layer.style.zIndex = zIdx;
cpt_val = true;

if(document.body && document.body.setCapture) {
// body 화면 고정(IE전용)
document.body.setCapture();
}

if(is_ie) {
esX = evt.offsetX;
esY = evt.offsetY;
}
else {
esX = evt.clientX - (cpt_layer.offsetLeft ? cpt_layer.offsetLeft : 0);
esY = evt.clientY - (cpt_layer.offsetTop ? cpt_layer.offsetTop : 0) ;
}

evt.cancelBubble = true;
return false;
}

// 마우스 드래그시 레이어 이동
function drag_layer(evt) {
var evt = evt ? evt : event;
if(cpt_val == true) {
if(cpt_layer != null) {
if(is_ie) {
cpt_layer.style.pixelLeft = evt.x + document.body.scrollLeft - esX;
cpt_layer.style.pixelTop = evt.y + document.body.scrollTop - esY;
}
else {
cpt_layer.style.left = evt.clientX - esX;
cpt_layer.style.top = evt.clientY - esY;
}
evt.cancelBubble = true;
return false;
}
}
}

// 드래그가 끝났을때 캡쳐한 레이어 놓기
function release() {
cpt_val = false;
cpt_layer = null;
if (document.body && document.body.releaseCapture) {
// body화면 고정풀기(IE전용)
document.body.releaseCapture();
}
}

// 레이어창 닫기
function close_layer(obj_id) {
cpt_layer = document.getElementById(obj_id);
cpt_layer.style.display = "none";
}

document.onmousemove = drag_layer;
document.onmouseup = release;
//-->
</script>

<div id=tbl style='top:262;left:262;width:300;position:absolute;cursor:default'>
<div onMousedown="capture('tbl', event);">
<table width=100% cellpadding=3 cellspacing=0>
<tr height=16 bgcolor=#2F75BB><td width=100%><b><font color=white>Title bar - 드레그 하세요</font></b></td><td nowrap align=right><a href="javascript://" onClick="close_layer('tbl');"><b><font color=white>X</font></b></a></td></tr>
</table>
</div>
<table bgcolor=#D2CCB0 width=100% height=300>
<tr><td align=center><font color=black>움직이는 레이어 창입니다.<br><br>타이틀바를 드레그 해보세요</font></td></tr>
</table>
</div>

<div id=tbl02 style='top:350;left:450;width:300;position:absolute;cursor:default'>
<div onMousedown="capture('tbl02', event);">
<table width=100% cellpadding=3 cellspacing=0>
<tr height=16 bgcolor=#872757><td width=100%><b><font color=white>Title bar - 드레그 하세요</font></b></td><td nowrap align=right><a href="javascript://" onClick="close_layer('tbl02');"><b><font color=white>X</font></b></a></td></tr>
</table>
</div>
<table bgcolor=#E6D5E6 width=100% height=300>
<tr><td align=center><font color=black>움직이는 레이어 창입니다.<br><br>타이틀바를 드레그 해보세요</font></td></tr>
</table>
</div>

<table border=0 width=400 height=600>
<tr><td> </td></tr>
</table>


출처 : http://darky.egloos.com/2254420

이 포스트 공유하기

글수정  글삭제 전체목록