이전에 마우스로 개체를 움직이는 소스와 목표 개체를 설정해서 겹치게 하는 소스를 등록했었다.
이번에는 조금 더 추가하여, 목표 개체에 이미 다른 개체가 있을 경우 원래 위치로 되돌리는 기능과,
목표 개체가 아닌 곳에 갖다 놓을 경우 원래 위치로 되돌리는 기능,
그리고 z-index를 조절해서 이동한 개체가 다른 개체의 아래로 들어가는 현상을 없앴다.
<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 movingspan1top=movingspan1.style.top
var movingspan1left=movingspan1.style.left
var movingspan2top=movingspan2.style.top
var movingspan2left=movingspan2.style.left
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
}
//z-index 설정 : 현재 움직이는 놈이 상위에 온다.
for(j=1;j<=2;j++){
var tempobj=document.getElementById('movingspan'+j)
if(tempobj!=null){
tempobj.style.zIndex=1
}
}
movingspanobj.style.zIndex=2
//세로 이동
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
//기존 개체 쫓아내기
for(j=1;j<=2;j++){
var tempobj=document.getElementById('movingspan'+j)
if(tempobj!=null){
if(movingspanobj!=tempobj){
tempx=tempobj.style.left
tempy=tempobj.style.top
if(tempobj.offsetLeft==targetspanobj.offsetLeft && tempobj.offsetTop==targetspanobj.offsetTop){
tempobj.style.left=eval('movingspan'+j+'left')
tempobj.style.top=eval('movingspan'+j+'top')
}
}
}
}
break
}
//목표 지점에 도달하지 못하면 원래 자리로 돌아가기
movingspanobj.style.left=eval(movingspanobj.id+'left')
movingspanobj.style.top=eval(movingspanobj.id+'top')
}
}
}
</script>
'쓸만한 주저리' 카테고리의 다른 글
| file 태그의 버튼을 그림으로 바꾸기 (0) | 2008.07.16 |
|---|---|
| on-line 행사 알림이(?) OnOffMix (0) | 2008.03.14 |
| 창(window, popup)을 IE 판(version)에 상관없이 닫고 싶을 때 (0) | 2008.02.29 |
| asp에서 특정 문자열의 갯수를 구하는 법 (0) | 2008.02.14 |
| iframe을 불러오면서 scroll하기 (0) | 2008.02.05 |