IE4 Layer 끌어 옮기기Go to Drag


IE4에서도 끌기는 mousemove를 사용하는 것은 같지만, 이벤트가 일어나는 범위를 지정시 captureEvents를 사용할 필요없이 Object.이벤트헨들러 로 하면 됩니다. 순서는..

Object.onmousedown = 이벤트헨들러 함수
Object.onmouseup = 이벤트헨들러 함수
Object.onmousemove = 이벤트헨들러 함수

입니다. 

document.onmousemove = dragIt;
document.onmousedown = beginDrag;
document.onmouseup = endDrag;

oldX=oldY=newX=newY=0, dragThis=null;

<div id=DRAG1 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>
어떤 Object에게 이벤트 범위를 지정시 captureEvents를 지정할 필요가 없습니다. 단순히 이벤트 헨들러에 이벤트 헨들러 함수를 지정하면 됩니다. 외부변수는 NN4에서와 마찮가지로 쓰입니다. 
function beginDrag() {

	dragThis = event.srcElement; // (1)
    
        while (dragThis.id.indexOf("Drag") == -1) { // (2)
        	dragThis = dragThis.parentElement;
                if (dragThis == null) { return }
        }

        oldX = (event.clientX + document.body.scrollLeft); // (3)
        oldY = (event.clientY + document.body.scrollTop); 
}
주석 (1)번은 마우스를 눌렀을 때 mousedown 이벤트가 일어났는 element(DRAG1)를 외부변수에 지정합니다.
주석 (2)번은 상위에 DRAG란 이름을 가지는 position element가 있으면 그것을 drag하라는 것입니다.
주석(3)의 event.clientX는 이벤트가 일어 났을 때 페이지의 위치입니다. 보이는 페이지입니다.

한 페이지가 넘어서 스크롤 바가 생기면 document.body.scrollLeft 로 스크롤 된 만큼의 거리를 같이 더해 줍니다. 그러면, 페이지 어느곳이라도 이벤트가 생긴 곳의 좌표를 정확히 알수 있습니다. scrollLeft, scrollTop가 적용되는 택은 BODY, BUTTON, DIV, FIELDSET, FRAME, IFRAME, IMG, MARQUEE, SPAN, TEXTAREA 입니다.

이 두 가지를 더하면 NN4의 pageX와 같다고 할수 있습니다. 

function dragIt() {
        if (dragThis == null) { return };
    
        newX = (event.clientX + document.body.scrollLeft);
        newY = (event.clientY + document.body.scrollTop);

        var distanceX = (newX - oldX);
        var distanceY = (newY - oldY);

        oldX = newX;
        oldY = newY;
    
        dragThis.style.pixelLeft += distanceX; // (1)
        dragThis.style.pixelTop += distanceY;

        event.returnValue = false;
}
IE4에서는 layer를 이동하는 method가 없습니다. 직접 값을 지정하면 같은 동작을 합니다. 이 때의 dragThis.style.pixelLeft 는 left와 다릅니다. pixelLeft는 수치 값이고, left는 수치에 "px"를 더한 문자열 값입니다. 즉, pixelLeft가 100을 가지고 있으면 left는 "100px"라는 문자열을 가집니다.

그리고, 끌기에서 left는 되지 않았습니다. click으로 한번 이동하는 것은 되었습니다. IE4에서 position element의 위치를 이동할 때는 pixelLeft, pixelTop을 사용하세요. 

function endDrag() {
        dragThis = null;
}
마우스 버튼을 놓으면 끌기할 Object를 없에 버립니다.

document.onmousemove = null; 로 해제할 수도 있습니다. 이것을 하면 다시 마우스를 눌러도 끌기가 되지 않습니다. 따라서, onmousedown 이벤트 헨들러의 지정함수 안에 document.onmousemove=dragIt;을 지정해 줘야합니다.

두 가지 방법중에서 하나를 사용하면 되지만, dragThis = null; 이 더 간단합니다. 

function beginDrag() {

	dragThis = event.srcElement; // (1)
                  
        while (dragThis.id.indexOf("Drag") == -1) { // (2)
        	dragThis = dragThis.parentElement;
                if (dragThis == null) { return }
        }

        oldX = (event.clientX + document.body.scrollLeft); // (3)
        oldY = (event.clientY + document.body.scrollTop); 
}
function dragIt() {

	if (dragThis == null) { return };
                  
        newX = (event.clientX + document.body.scrollLeft);
        newY = (event.clientY + document.body.scrollTop);

        var distanceX = (newX - oldX);
        var distanceY = (newY - oldY);

        oldX = newX;
        oldY = newY;
                  
        dragThis.style.pixelLeft += distanceX; // (1)
        dragThis.style.pixelTop += distanceY;
        
        event.returnValue = false;
}
function endDrag() {
	dragThis = null;
}
function setDrag() {
        document.onmousemove = dragIt;
        document.onmousedown = beginDrag;
        document.onmouseup = endDrag;

        oldX=oldY=newX=newY=0, dragThis=null;
}
</script>
</head>
<body onLoad="if(document.all) setDrag()">
<div id=DRAG1 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>
실행 하기
IE4 Drag

   :)



T O P