전에 개체를 이동하는 소스를 등록했었는데
거기서 조금 더 나아가서 목표 개체를 설정하고 그 개체 위에 개체를 움직였을 때
목표 개체와 이동한 개체가 겹쳐지도록 만들어 보았다.
<body onselectstart="return false">
<!--
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
-->
<span id=movingspan1 style="background-color:gray;width:20px;height:20px;border:1px solid black;position:absolute;z-index:1" onmousedown=movethis(this)></span>
<span id=movingspan2 style="background-color:gray;width:20px;height:20px;border:1px solid black;position:absolute;left:40;z-index:1" onmousedown=movethis(this)></span>
<span id=targetspan1 style="background-color:skyblue;width:20px;height:20px;border:1px solid black;position:absolute;top:40;left:0;z-index:0"></span>
<span id=targetspan2 style="background-color:skyblue;width:20px;height:20px;border:1px solid black;position:absolute;top:40;left:40;z-index:0"></span>
<span id=targetspan3 style="background-color:skyblue;width:20px;height:20px;border:1px solid black;position:absolute;top:40;left:80;z-index:0"></span>
<script>
var move=false
var spanid=''
var x=0,y=0
function movespan(e){
if(move){
if(e){
//불여우용
x=e.pageX
y=e.pageY
}
else{
//ie용
x=window.event.clientX
y=window.event.clientY
}
//세로 이동
if(y>movingspanobj.offsetHeight/2 && movingspanobj.offsetHeight+movingspanobj.offsetTop<document.body.clientHeight){
movingspanobj.style.top=y-movingspanobj.offsetHeight/2
}
else if(movingspanobj.offsetHeight+movingspanobj.offsetTop>=document.body.clientHeight){
movingspanobj.style.top=movingspanobj.offsetTop-2
}
else{
movingspanobj.style.top=0
}
//가로 이동
if(x>movingspanobj.offsetWidth/2 && movingspanobj.offsetWidth+movingspanobj.offsetLeft<document.body.clientWidth){
movingspanobj.style.left=x-movingspanobj.offsetWidth/2
}
else if(movingspanobj.offsetWidth+movingspanobj.offsetLeft>=document.body.clientWidth){
movingspanobj.style.left=movingspanobj.offsetLeft-2
}
else{
movingspanobj.style.left=0
}
}
}
var targetspanid,targetspanobj,movingspanid,movingspanobj
document.onmousedown=new Function('move=true')
document.onmouseup=new Function('move=false;fixintarget()')
function movethis(spanobj){
movingspanobj=spanobj
movingspanobj.onmouseout=new Function('move=false;fixintarget()')
movingspanobj.onmouseover=new Function('move=false;fixintarget()')
movingspanobj.onmousemove=movespan
}
function fixintarget(){
for(i=1;i<=3;i++){
targetspanid='targetspan'+i
targetspanobj=null
targetspanobj=document.getElementById(targetspanid)
if(targetspanobj!=null){
var targetx1=targetspanobj.offsetLeft
var targetx2=targetspanobj.offsetLeft+targetspanobj.offsetWidth
var targety1=targetspanobj.offsetTop
var targety2=targetspanobj.offsetTop+targetspanobj.offsetHeight
if(x>=targetx1 && x<=targetx2 && y>=targety1 && y<=targety2){
movingspanobj.style.left=targetspanobj.offsetLeft
movingspanobj.style.top=targetspanobj.offsetTop
}
}
}
}
</script>
'쓸만한 주저리' 카테고리의 다른 글
| iframe을 불러오면서 scroll하기 (0) | 2008.02.05 |
|---|---|
| html로 페이지 자동 이동하기 (0) | 2008.02.05 |
| 마우스로 개체를 움직이는 자바스크립트 (0) | 2008.01.16 |
| 내가 쓰는 무료 프로그램들 (0) | 2008.01.08 |
| 자바스크립트를 이용해서 문자열을 클립보드로 복사하기 (0) | 2007.12.05 |