NN4 DragGo to Drag
예제 1


NN4에서 끌기는 mousemove를 사용합니다. mousemove가 일어나면 그 만큼 layer를 욺직이는 것입니다. 특정 범위에서 할 수 있게 captureEvents()로 이벤트가 일어나는 범위를 정하고 mousedown, mouseup으로 mousemove를 제어합니다. 순서로 하면..

1. Object.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
2. Object.onmousedown=이벤트헨들러 함수; Object.onmouseup=이벤트헨들러 함수
3. Object.captureEvents(Event.MOUSEMOVE)
4. Object.releaseEvents(Event.MOUSEMOVE);
주로 위의 식이 됩니다. 3.번은 Object.onmousedown의 이벤트 헨들러 함수 안에서 지정합니다. 마우스를 눌렀을 때만 끌기를 한다는 말입니다. 그렇지 않으면 아무데서나 끌기가 됩니다.

그리고, 4.번으로 Object.onmouseup의 이벤트 헨들러 함수 안에서 mousemove이벤트를 해제합니다. 마우스를 끌고 나서 버튼을 놓은면 끌기를 멈추기 위해서 입니다.

꼭 mousedown, mouseup을 사용하여 mousemove를 제어해야만 하는 것은 아닙니다. 가장 알기 쉽고 다른 응용P/G이 이런 구조로 되었기 때문에 이렇게 합니다.

여기서 대소문자는 꼭 지켜야합니다. 

document.div1.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
document.div1.onmousedown = beginDrag
document.div1.onmouseup = endDrag

oldX=oldY=newX=newY=0;

<div id=div1 style="position:absolute; width:100; left:100; top:100; 
	background-color:yellow; layer-background-color:yellow; clip:rect(0,100,100,0)"
	>div1 CSS Layer
</div>
div1 레이어에서 mousedown, mouseup이벤트를 사용하게 지정하고 이 이벤트가 일어났을 때 사용할 함수로 beginDrag, endDrag를 각각 지정합니다.

밑의 외부변수는 layer를 끌 때 사용할 변수들 입니다. 

function beginDrag(e) {
	document.div1.captureEvents(Event.MOUSEMOVE)
	document.div1.onmousemove = dragIt
	oldX = e.pageX
	oldY = e.pageY
}
document.div1.captureEvents(Event.MOUSEMOVE) 로 마우스를 누르면 mousemove이벤트를 사용할 수 있게 하고 헨들러에 함수 dragIt을 지정했습니다. 마우스를 누르고 욺직이면 dragIt 함수가 호출됩니다.

oldX, oldY는 마우스를 눌렀을 때, 마우스를 욺직이기 전의 값을 저장합니다. 마우스를 욺직이면 dragIt 함수에서 이 값을 욺직인 값과 비교하여 div1 layer를 이동하게 합니다. 

function dragIt(e) {
	newX = e.pageX - oldX;
	newY = e.pageY - oldY;

	oldX = e.pageX;
	oldY = e.pageY;

	document.div1.moveBy(newX, newY);	

	return false;
}
욺직인 거리 만큼의 거리와 마우스를 눌렀을 때의 거리를 비교하여 이동할 곳으로 newX, newY에 저장합니다. 그리고 다음 마우스 이동시 사용하기 위해서 oldX, oldY에 지금 마우스의 위치를 저장합니다.

layer 메소드 moveBy로 이동한 만큼 div1 layer를 이동합니다. return false는 이벤트의 작동을 취소합니다.

여기서 이벤트의 작동이란 이벤트헨들러에 지정된 함수가 아니고, div1 layer안의 mousemove, 이벤트를 가지는 Object입니다. 즉, 글자들이 선택상태가 되지않게 합니다. 

function endDrag() {
	document.div1.onmousemove = 0;
	document.div1.releaseEvents(Event.MOUSEMOVE)
}
mouseup으로 원하는 위치까지 layer를 이동했으면 mousemove를 사용하지 않게 해제합니다. 
function beginDrag(e) {
	document.div1.captureEvents(Event.MOUSEMOVE)
	document.div1.onmousemove = dragIt
	oldX = e.pageX
	oldY = e.pageY
}

function dragIt(e) {
	newX = e.pageX - oldX;
	newY = e.pageY - oldY;

	oldX = e.pageX;
	oldY = e.pageY;

	document.div1.moveBy(newX, newY);	

	return false;
}

function endDrag() {
	document.div1.onmousemove = 0;
	document.div1.releaseEvents(Event.MOUSEMOVE)
}

function setDrag() {
	document.div1.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
	document.div1.onmousedown = beginDrag
	document.div1.onmouseup = endDrag

	oldX=oldY=newX=newY=0;
}
</script>
</head>
<body onLoad="setDrag()">
<div id=div1 style="position:absolute; width:100; left:100; top:100; background-color:yellow;
		 layer-background-color:yellow; clip:rect(0,100,100,0)"
>div1 CSS Layer</div>
실행 하기


TOP