|
작성일 : 11-04-29 14:25
|
글쓴이 :
기리 (124.♡.25.162)
 조회 : 2,757
|
 http://www.superkts.pe.kr/helper/view.php?seq=258&PHPSESSID=886d395d6b… [862] |
아래 이미지를 드래그 해보세요<br>
<img src="/images/helper/smp_400_09.jpg" style="position:relative; top:0; left:0; cursor:move" onmousedown="startDrag(event, this)">
<img src="/images/helper/smp_400_13.jpg" style="position:relative; top:0; left:0; cursor:move" onmousedown="startDrag(event, this)"><br>
<img src="/images/helper/smp_400_16.jpg" style="position:relative; top:0; left:0; cursor:move" onmousedown="startDrag(event, this)">
<img src="/images/helper/smp_400_21.jpg" style="position:relative; top:0; left:0; cursor:move" onmousedown="startDrag(event, this)"><br>
<span style="position:relative; top:0; left:0; cursor:move" onmousedown="startDrag(event, this)">
<img src="http://blogfile.paran.com/BLOG_720332/200810/1225201748_Image1.jpg">
<img src="http://blogfile.paran.com/BLOG_720332/200810/1225201748_Image1.jpg"><br>
이렇게도 사용이 됩니다~
</span>
<script language="Javascript">
<!--
var img_L = 0;
var img_T = 0;
var targetObj;
function getLeft(o){
return parseInt(o.style.left.replace('px', ''));
}
function getTop(o){
return parseInt(o.style.top.replace('px', ''));
}
// 이미지 움직이기
function moveDrag(e){
var e_obj = window.event? window.event : e
targetObj.style.left = e_obj.clientX + img_L;
targetObj.style.top = e_obj.clientY + img_T;
return false;
}
// 드래그 시작
function startDrag(e, obj){
targetObj = obj;
var e_obj = window.event? window.event : e;
img_L = getLeft(obj) - e_obj.clientX;
img_T = getTop(obj) - e_obj.clientY;
document.onmousemove = moveDrag;
document.onmouseup = stopDrag;
if(e_obj.preventDefault)e_obj.preventDefault(); // IE 가 아닌 브라우저에서 씀 (용도는 -_-?)
}
// 드래그 멈추기
function stopDrag(){
document.onmousemove = null;
document.onmouseup = null;
}
//-->
</script>
|
|
|
Total 16
