마우스로 드래그가 가능한 영역 만들기

이곳에서 설명하는 소스는 인터넷 어디선가 웹서핑 하다가 찾았습니다.
설명하려고 하는 것은 이것을 어떻게 활용할 것인가 하는 것입니다.

딱지 배너라고 들어 보셨나요..? 같이 일하는 분이 딱지 배너라고 하더라구요.
통용되는 단어인지 아닌지는 모르겠습니다만..
아무튼, 배너 때문에 웹페이지의 일정 부분이 가려진다면, 마우스를 이용해서 다른 영역으로 옮겨도 되지 않을까요..
각 페이지들 모두에 위치를 파라미터로 전달하는 것도 고려해 볼 만합니다.
form 태그의 input type 을 hidden 으로 해서 파라미터를 넘기는 방식이죠.
다음번 브라우저를 켰을때도 동일한 위치에 올려지게 하려면, 쿠키에 값을 담아서 운용해도 되겠고요.
간단한 쿠키니까 보안상 문제는 생기지 않겠죠.. ^^>

아, 그리고.. 팝업 대체용으로 활용하면 어떨까요..?
팝업 차단을 당하느니, 본문 내에 팝업 내용을 대체하여 표시 하자는 것이죠.
팝업 모양으로 꾸미면, 마우스로 끌어다가 다른 곳에 놓을 수 있다는 것을 어렴풋이 짐작(?)하겠죠..?

그리고, 목록을 보면서, 신규로 등록하거나 수정하는 용도로 쓰면 어떨까요..?
div 로 iframe 을 감싸고 여기에 마우스를 드래그할 수 있도록 하면 좋을 것같습니다.

그런데 기능상의 제약이 있습니다.
frame 이나 iframe 안에서 사용되면 해당 프레임 영역 안에서만 드래깅 기능이 먹습니다.
좌표값 때문이죠. absoute 로 해도 통하지 않습니다.
화면을 스크롤 할때는 간발의 차이(?)로 마음에 들지 않는 현상(?)이 발생할 수 있습니다.

어떻게 사용하냐구요..?
div 에 id 를 달고, div 안에 필요한 내용을 넣고, makeDraggable.js 을 포함시키고, makeDraggable 함수를 실행합니다.
<div id="idMe" style="position:absolute; left:610px; top:320px; width:150px; height:150px; z-index:10">
<iframe src="/here/pose/url.jsp"></iframe>
</div>
<jsp:include page="./makeDraggable.jsp" flush="true" />
<script>makeDraggable("idMe");</script>

위의 코드는 jsp:include 로 자바스크립트 파일을 인클루드 하였는데요.
간혹, 외부 .js 파일을 읽는데 오류가 발생하는 경우를 방지하기 위해서 아예 .jsp 안에 인클루드 한 겁니다.
물론, 외부 .js 파일이 아니기 때문에 다운로드 시간이 더 많이 소요되고,
로컬에 이미 다운로드 받은 .js 를 끌어다 재사용 하지 못하지만.. 나름 장점도 있습니다.
이를테면, Inktomi 같은 캐시 서버가 돌아가는 서버 구조 라면, .js 파일이 변경될 때마다 캐시 서버의 캐시를 죽여야 하죠.
그리고, 사용자의 웹브라우저에 로컬 PC 의 .js 를 그대로 사용하라는 옵션이 있으면 서버의 .js 가 변경되어도 문제 발생해요.
그러니까 때로는 .jsp 안에 .js 내용물을 jsp:include 하는 것이 필요할 수도 있습니다. ^^>
간혹 네트워크 속도 때문에, .jsp 가 번역한 .html 내용물은 PC 에 모두 다운로드 되었는데..
본문에 사용된 이미지가 많아서 이미지를 먼저 다운로드 받고 있고, .js 는 아직 다운로드 받지 못한 상황에서..
.html 내용물이 .js 의 함수를 call 하거나 변수를 참조한다면 스크립트 오류가 뜨는 거죠.. ㅋㅋ


아래 내용을 makeDragabble.js 에 담습니다.

<script type="text/javascript"> <!-- var dragObject = null; var mouseOffset = null; function mousePoint(x,y) { // 마우스 포인트 생성.   this.x = x;   this.y = y; } function mousePosition(evt) { // 마우스 위치 검색.   var x = parseInt(evt.clientX);   var y = parseInt(evt.clientY);   return new mousePoint(x,y); } function getMouseOffset(target, evt) { // 페이지 내에서 엘리먼트의 위치 찾기.   evt = evt || window.event;   var mousePos = mousePosition(evt);   var x = mousePos.x - target.offsetLeft;   var y = mousePos.y - target.offsetTop;   return new mousePoint(x,y); } function mouseUp(evt) { // 드래그 종료.   dragObject = null; } function mouseMove(evt) { // 드래그 할 때만 마우스 이동 캡처.   if (!dragObject) return;   evt = evt || window.event;   var mousePos = mousePosition(evt);   if (dragObject) {     dragObject.style.position = "absolute";     dragObject.style.top = mousePos.y - mouseOffset.y + "px";     dragObject.style.left = mousePos.x - mouseOffset.x + "px";     return false;   } } function makeDraggable(item) { // 객체 드래그 활성화.   if (item) {     item = document.getElementById(item);     item.onmousedown = function(evt) {       dragObject = this;       mouseOffset = getMouseOffset(this, evt);       return false;     }   } } document.onmouseup = mouseUp; document.onmousemove = mouseMove; //--> </script>

Noname2.txt