적절한 이미지 드래그 & 드랍

아래 이미지를 드래그 해보세요<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>