프리랜서 웹디자이너 RELATION 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

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3517
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3524
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2173
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20769
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 327
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 353
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 618
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 689
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 674
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 630
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669