인터넷정보

자바스크립트 - 드래그로 선택하는 박스

알 수 없는 사용자 2008. 5. 30. 16:09
다시 수정 했습니다~
선택시 이벤트 처리는 다음에 올리도록 하겠습니다~~~
한가지 !DOCTYPE 선언 꼭 해야 합니다~
아쉬운점은 마우스를 빠르게 움직이면 브라우저가 계산을 못따라 가네요 ㅡ.ㅡ;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ysksoft</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
/*------------------------------------------------------------------*
* 개 발 자 : 윤석규
*-------------------------------------------------------------------*
* 이 메 일 : nanummp3@naver.com
*-------------------------------------------------------------------*
* 홈페이지 : http://www.ysksoft.com
*------------------------------------------------------------------*/
if(navigator.appName == 'Microsoft Internet Explorer') {
    var BR = 'IE';
} else {
    var BR = 'FF';
}
function addEvent(obj, evt, fn) {
    switch(BR) {
        case 'IE':
            obj.attachEvent(evt, fn);
            break;
        case 'FF':
        default:
            evt = evt.replace('on', '');
            obj.addEventListener(evt, fn, true);
            break;
    }
}
var dnd_check = false;
var loading = document.createElement('DIV');
var ftop = 0;
var fleft = 0;
function dndMouseDown(evt) {
    var e = evt||window.event;
    dnd_check = true;
    loading.style.position = 'absolute';
    loading.style.backgroundColor = '#F5F5F5';
    loading.style.top = e.clientY+'px';
    loading.style.left = e.clientX+'px';
    loading.style.width = '0px';
    loading.style.height = '0px';
    loading.style.border = '1px #000000 solid';
    ftop = e.clientY;
    fleft = e.clientX;
    addEvent(document, 'onmousemove', dndMouseMove);
    document.body.appendChild(loading);
}
function dndMouseMove(evt) {
    if(dnd_check == true) {
        var e = evt||window.event;
        var width = 0;
        var height = 0;
        if(e.clientX-fleft >= 0) {
            width = e.clientX-fleft;
        } else {
            loading.style.left = e.clientX+'px';
            width = (fleft-e.clientX);
        }
        if(e.clientY-ftop >= 0) {
            height = e.clientY-ftop;
        } else {
            loading.style.top = e.clientY+'px';
            height = (ftop-e.clientY);
        }
        loading.style.width = width+'px';
        loading.style.height = height+'px';
    }
    return false;
}
function dndMouseUp(evt) {
    dnd_check = false;
    var count = document.body.childNodes.length;
    if(count > 0) document.body.removeChild(loading);
}
addEvent(document, 'onmousedown', dndMouseDown);
addEvent(document, 'onmouseup', dndMouseUp);
//-->
</script>
</head>
<body>

</body>
</html>


미리보기 및 출처 : http://ysksoft.com/dnd.html 
반응형