마우스로 개체를 움직이는 자바스크립트

혹시 태그나 자바스크립트에 변형이 가해질 것 같아 파일도 같이 올린다.

소스를 이해하기 어렵다면 아래 주소를 참조해 보라.

 

http://www.simpleisbest.net/archive/2006/11/24/1316.aspx

 

<span id=testspan1 style="background-color:#999999;width:100px;height:100px;border:1px solid black;position:absolute">test</span>

<script>
var move=false
var spanid=''
function movespan(e){
  if(move){
    var spanobj=document.getElementById(spanid)
    var x,y
    if(e){
      //불여우용
      x=e.pageX
      y=e.pageY
    }
    else{
      //ie용
      x=window.event.clientX
      y=window.event.clientY
    }
    //세로 이동
    if(y>spanobj.offsetHeight/2 && spanobj.offsetHeight+spanobj.offsetTop<document.body.clientHeight){
      spanobj.style.top=y-spanobj.offsetHeight/2
    }
    else if(spanobj.offsetHeight+spanobj.offsetTop>=document.body.clientHeight){
      spanobj.style.top=spanobj.offsetTop-2
    }
    else{
      spanobj.style.top=0
    }
    //가로 이동
    if(x>spanobj.offsetWidth/2 && spanobj.offsetWidth+spanobj.offsetLeft<document.body.clientWidth){
      spanobj.style.left=x-spanobj.offsetWidth/2
    }
    else if(spanobj.offsetWidth+spanobj.offsetLeft>=document.body.clientWidth){
      spanobj.style.left=spanobj.offsetLeft-2
    }
    else{
      spanobj.style.left=0
    }
    spanobj.innerHTML=spanobj.offsetTop+','+spanobj.offsetLeft
  }
}

spanid='testspan1'
document.getElementById(spanid).onmousedown=new Function('move=true')
document.getElementById(spanid).onmouseup=new Function('move=false')
document.getElementById(spanid).onmouseout=new Function('move=false')
document.getElementById(spanid).onmouseover=new Function('move=false')
document.getElementById(spanid).onmousemove=movespan
</script>

move_object.html

0.0MB