제가 지금 하고 있는 프로젝트의 한 부분으로 구현한 것입니다.
레이어(DIV)를 이용하여 글상자, 라디오박스, Select 박스 등의 여러 구성요소들을 특정하게 지정된 영역에서만 움직이도록 하는 구현 예입니다.
아래 예제를 보면 자바스크립트가 핵심입니다. 설명을 간단하게나마 붙여놨으니 쉽게 이해하실수 있을 것입니다.
by itislord ( http://www.janghwan2.pe.kr )
----------------------------------------------------------------------------------------------------
<head>
<title>:::::: </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE=JAVASCRIPT>
var dragapproved=false;
var z,x,y;
var l1,l2,t1,t2;
function move(){
if (event.button==1&&dragapproved){ //event.button==1 마우스 버튼 왼쪽 눌렀을 때
z.style.pixelLeft=temp1+event.clientX-x;
z.style.pixelTop=temp2+event.clientY-y;
if(z.style.pixelLeft<l1||z.style.pixelLeft>(l2-100)||z.style.pixelTop<t1||z.style.pixelTop>t2) {
z.style.pixelLeft = temp1;
z.style.pixelTop = temp2;
}
return false;
}
}
function drags(left1,top1,left2,top2){
l1=left1,l2=left2,t1=top1,t2=top2; //현재 DIV 상위의 DIV로부터의 left, top 거리
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true;
z=event.srcElement;
temp1=z.style.pixelLeft; //활성창 기준점에서 레이어 시작점 x좌표, 기준점은 현 DIV 상위의 DIV를 기준으로 함, 상위 DIV가 없을 때는 해당 활성창을 기준으로 함
temp2=z.style.pixelTop; //활성창 기준점에서 레이어 시작점 y좌표
x=event.clientX; //활성창 기준점에서 마우스로 찍은 레이어 x좌표
y=event.clientY; //활성창 기준점에서 마우스로 찍은 레이어 y좌표
document.onmousemove=move;
}
}
//document.onmousedown=drags;
document.onmouseup= new Function("dragapproved=false");
</SCRIPT>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align=center>
<div id=A1 style="position:absolute; border:1px dotted #D0D0D0; padding:2; left:10px; top:10px; height:200; width:500px; visibility:show; z-index:1; cursor:hand;" class="drag">
<div id=L1 style="position: absolute; border:1px dotted #D0D0D0; padding:2; height:30; left:40px; top:50px; visibility:show; z-index:100; cursor:hand;" class="drag" onMousedown="drags(0,0,500,170)">
<table border=0 cellspacing=0 bordercolordark="white" bordercolorlight="silver" bordercolor="silver">
<tr height=25>
<td width=100 align=left> 아이디</td>
<td align=left>
<input type="text" name=COL1 value="1" size=10 READONLY style='background:#F0F0F0'>
</td>
</tr>
</table>
</div>
<div id=L2 style="position: absolute; border:1px dotted #D0D0D0; padding:2; height:30; left:40px; top:100px; visibility:show; z-index:100; cursor:hand;" class="drag" onMousedown="drags(0,0,500,170)">
<table border=0 cellspacing=0 bordercolordark="white" bordercolorlight="silver" bordercolor="silver">
<tr height=25>
<td width=100 align=left> 테이블이름</td>
<td align=left>
<input type="text" name=COL2 value="학번" size=10 READONLY>
</td>
</tr>
</table>
</div>
</div>
<div id=A2 style="position:absolute; border:1px dotted #D0D0D0; padding:2; left:10px; top:300px; height:150; width:500px; visibility:show; z-index:1; cursor:hand;" class="drag">
<div id=L3 style="position: absolute; border:1px dotted #D0D0D0; padding:2; height:30; left:40px; top:50px; visibility:show; z-index:100; cursor:hand;" class="drag" onMousedown="drags(0,0,500,120)">
<table border=0 cellspacing=0 bordercolordark="white" bordercolorlight="silver" bordercolor="silver">
<tr height=25>
<td width=100 align=left> 테이블이름</td>
<td align=left>
<input type="text" name=COL2 value="학번" size=10 READONLY>
</td>
</tr>
</table>
</div>
</div>
<div id=A3 style="position:absolute; border:1px dotted #D0D0D0; padding:2; left:10px; top:500px; height:150; width:500px; visibility:show; z-index:1; cursor:hand;" class="drag">
<div id=L4 style="position: absolute; border:1px dotted #D0D0D0; padding:2; height:30; left:40px; top:50px; visibility:show; z-index:100; cursor:hand;" class="drag" onMousedown="drags(0,0,500,120)">
<table border=0 cellspacing=0 bordercolordark="white" bordercolorlight="silver" bordercolor="silver">
<tr height=25>
<td width=100 align=left> 테이블설명</td>
<td align=left>
<input type="radio" name=COL value=temp >
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
'프로그래밍Tips' 카테고리의 다른 글
| html의 Layer 사용시 select 박스와의 충돌문제 (6) | 2005.11.07 |
|---|---|
| Div로 마우스를 대면 스크롤하는 글상자 만들기..from [korea.internet.com] (0) | 2005.09.22 |
| 오라클 주요 SQL명령 & 산술함수 (0) | 2005.09.22 |