이미지를 드레그해서 이동가능하게 하는 소스 입니다.
실행화면
<style type="text/css">
.drag { position: relative; cursor:move }
</style>
<script type="text/javascript">
//------------ 마우스로 객체 드래그
var bdown = false;
var x, y;
var sElem;
//------------------------------------ IE전용
function mdown_IE() {
if(event.srcElement.className == "drag") {
bdown = true;
sElem = event.srcElement;
x = event.clientX;
y = event.clientY;
}
}
function mup_IE() {
bdown = false;
}
function changeInt(num){
var temp = parseInt(num);
if(isNaN(temp)){
temp = 0;
}
return temp;
}
function moveimg_IE() {
if(bdown) {
var distX = event.clientX - x;
var distY = event.clientY - y;
sElem.style.left =changeInt(sElem.style.left) + distX;
sElem.style.top = changeInt(sElem.style.top) + distY;
x = event.clientX;
y = event.clientY;
return false;
}
}
//----------------------------------- IE가 아닐경우(FF기준)
function mdown_FF(event){
// Netscape
if (event.which !=1){
return false;
}
else{
if(event.target.className == "drag") {
bdown = true;
//sElem = event.srcElement;
sElem = event.target ;
x = event.clientX;
y = event.clientY;
}
}
}
function mup_FF(event) {
bdown = false;
}
function moveimg_FF(event) {
if(bdown) {
var distX = event.clientX - x;
var distY = event.clientY - y;
sElem.style.left =changeInt(sElem.style.left) + distX;
sElem.style.top = changeInt(sElem.style.top) + distY;
x = event.clientX;
y = event.clientY;
return false;
}
}
//------------------- 이벤트 등록
if (!document.all){
//FF도 될 수 있도록
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=mdown_FF;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveimg_FF;
document.captureEvents(Event.MOUSEUP);
document.onmouseup = mup_FF;
}
else{
document.onmousedown = mdown_IE;
document.onmouseup = mup_IE;
document.onmousemove = moveimg_IE;
}
</script>
<body>
<img class='drag' src='http://sstatic.naver.com/search/images10/lg.gif'>
</body>