자바스크립트 - 드래그로 선택하는 박스
인터넷정보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
선택시 이벤트 처리는 다음에 올리도록 하겠습니다~~~
한가지 !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
'인터넷정보' 카테고리의 다른 글
| 글씨, 글자, 폰트 크기 자동으로 늘리기 줄이기 (0) | 2008.07.15 |
|---|---|
| [함수] 텍스트 내부에 포함된 탭 문자 제거하기 (0) | 2008.07.09 |
| ‘.com’ ‘.net’ - 컴,넷 등 기존 인터넷 주소 완전히 바뀐다 (0) | 2008.06.27 |
| IE Tester (IE 5.5, IE 6, IE 7, IE 8 Beta1) (0) | 2008.06.06 |
| str_replace() 한글치환시 한글깨짐 현상 보강...?? (0) | 2008.05.30 |
| 네이버 실시간 급상승 검색어 산출방법 (0) | 2008.05.23 |
| 75달러 노트북 나온다… OLPC 'XO 2.0' 개발 중 (0) | 2008.05.21 |
| php 에서 utf-8 인지 euc-kr 인지.. 알수 있는 방법 (0) | 2008.04.11 |
| UTF-8 헤더(header) 오류 (0) | 2008.04.10 |
| 리눅스용 프로그램들 (0) | 2008.03.28 |
