레이어 드래그 앤 드랍 가능하게 해주기(익스플로러)
자바 스크립트 소스를 구했는데, 내용이 너무 이해하기 어렵게 되어 있더군요.
제가 필요해서 무슨 소릴 하구있나 하나하나 뜯어봤습니다.
그리구, 제가 이해하는 코드로 바꿔 보았습니다.
여기 코드마저 어렵게 생각하실 분도 계시겠지만, 제가 이해하는데 걸린 시간
보다야 더 걸릴려구요!
보시고, 나중에 응용하는데 도움되는 자료가 되면 좋겠네요.
(넷스케이프는 테스트 하기가 여의치 않아 익스플로러용 코드만 작성했습니다.)
//////////////////////////////////////////////////////
<html>
<head>
<script language="JavaScript">
<!--
function drag_move(){
if(dragapproved){
document.all.my_drag.style.left = base_x + event.clientX - previous_x;
document.all.my_drag.style.top = base_y + event.clientY - previous_y;
return false;
}
}
function drag_init(){
var selectedobj= event.srcElement;
var topelement= "BODY";
while (selectedobj.tagName!="BODY" && selectedobj.id != "my_drag"){
selectedobj= selectedobj.parentElement;
}
if(selectedobj.id == 'my_drag'){
base_x = parseInt(document.all.my_drag.style.left);
base_y = parseInt(document.all.my_drag.style.top);
previous_x = event.clientX;
previous_y = event.clientY;
dragapproved = true;
document.onmousemove = drag_move;
}
}
function drag_release(){
dragapproved=false;
}
document.onmousedown=drag_init;
document.onmouseup=drag_release;
//-->
</script>
</head>
<body>
<div id='my_drag' style="position:absolute; left:300px; top:300px; width:300; height:150; z-index:1; visibility:show">
<table width=100% height=100% bgcolor='yellow' style="cursor:hand">
<tr>
<td align=center>이미지나 문서</td>
</tr>
</table>
</div>
</body>
</html>
제가 필요해서 무슨 소릴 하구있나 하나하나 뜯어봤습니다.
그리구, 제가 이해하는 코드로 바꿔 보았습니다.
여기 코드마저 어렵게 생각하실 분도 계시겠지만, 제가 이해하는데 걸린 시간
보다야 더 걸릴려구요!
보시고, 나중에 응용하는데 도움되는 자료가 되면 좋겠네요.
(넷스케이프는 테스트 하기가 여의치 않아 익스플로러용 코드만 작성했습니다.)
//////////////////////////////////////////////////////
<html>
<head>
<script language="JavaScript">
<!--
function drag_move(){
if(dragapproved){
document.all.my_drag.style.left = base_x + event.clientX - previous_x;
document.all.my_drag.style.top = base_y + event.clientY - previous_y;
return false;
}
}
function drag_init(){
var selectedobj= event.srcElement;
var topelement= "BODY";
while (selectedobj.tagName!="BODY" && selectedobj.id != "my_drag"){
selectedobj= selectedobj.parentElement;
}
if(selectedobj.id == 'my_drag'){
base_x = parseInt(document.all.my_drag.style.left);
base_y = parseInt(document.all.my_drag.style.top);
previous_x = event.clientX;
previous_y = event.clientY;
dragapproved = true;
document.onmousemove = drag_move;
}
}
function drag_release(){
dragapproved=false;
}
document.onmousedown=drag_init;
document.onmouseup=drag_release;
//-->
</script>
</head>
<body>
<div id='my_drag' style="position:absolute; left:300px; top:300px; width:300; height:150; z-index:1; visibility:show">
<table width=100% height=100% bgcolor='yellow' style="cursor:hand">
<tr>
<td align=center>이미지나 문서</td>
</tr>
</table>
</div>
</body>
</html>
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 2개