팝업(레이어 드레그)



프리랜서 웹디자이너 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
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 334
중요 [소스] 메뉴바 UI 소스1 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.04.02 3665
중요 [소스] jquery 달력 Datepicker  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.11.02 2953
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.02.10 73
중요 [소스] [소스] 메뉴바 UI 소스2 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2016.07.19 6077
중요 [기타] 구글맵 플랫폼  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.22 4632
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.18 5104
중요 [소스] 구글맵 좌표값 구하기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.08 3374
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 21875
중요 [소스] 제시어기능 자동완성 검색  이미지 파일이 첨부되어 있습니다. 꿘쓰 2011.05.18 2438
232 [소스] 슬라이드 배너 Swiper Slide 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.06 0
231 [소스] gnb 메뉴 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.02 0
230 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 334
229 [소스] Mouse Scroll Dwon 꿘쓰 2021.03.08 146
228 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 351
225 [소스] Window.scroll() 꿘쓰 2020.06.22 280
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 2
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 274
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 343
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 683
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 563
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 742
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 882
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 821
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 1109
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1