태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

첫째. 반투명 그림자 효과

filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;
filter는 IE전용이고 FF를 고려하여 opacity 속성값을 지정한다.

 

둘째. 레이어 마우스 드래그
포띠고 차띠고 레이어 마우스 드래그 동작을 하기 위한 핵심적인 스크립트만 살펴보자.

 

일단, 브라우저 체크를 한다.

isIE=document.all; // 익스플로러의 경우 document.all을 지원한다.

PopupLayer라는 ID값을 가진 레이어의 기본 위치를 잡아준다.

PopupLayerMove(50,100); // 팝업 기본 위치

 

function PopupLayerMove(div_left,div_top){ // 레이어 이동
    document.getElementById("PopupLayer").style.left = div_left ;
    document.getElementById("PopupLayer").style.top = div_top ;
}

 

마우스 다운시 함수와 마우스 이동시 함수만 적절히 사용하면 되는 것이다.

 

document.getElementById("PopupLayer").onmousedown=PopMove2;
document.getElementById("PopupLayer").onmouseup=Function("MoveEnabled=false");

 

function PopMove2(e){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(document.getElementById("PopupLayer").style.left);
    nowY=parseInt(document.getElementById("PopupLayer").style.top);
    oldx = isIE ? event.clientX-nowX : e.clientX-nowX
    oldy = isIE ? event.clientY-nowY : e.clientY-nowY
    MoveEnabled=true;

    document.onmousemove=PopMove;
}

 

function PopMove(e){
    if (!MoveEnabled) return; 

    document.getElementById("PopupLayer").style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
    document.getElementById("PopupLayer").style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
    return false;
}

 

 

<문제점 보완>

 

하지만, xhtml로 코딩시엔 FF에서 작동하지 않는다.

이유는 X, Y축 설정 과정(style.left)에서 "px" 단위가 빠졌기 때문이다.

레이어 이동 관련하여 xhtml 기준 샘플파일을 첨부한다.

이 기본 동작을 응용하면 좀 더 다이렉티브한 기능을 처리 할 수 있다.

 

그리고 레이어를 화면에서 넘어가게 우측이나 아래로 이동시키면 무한 스크롤이 생기는 문제가 있다.

이 문제를 해결하기 위해 최소한의 예외처리는 하나 정도 있으면 좋을꺼란 생각이 든다.

 

예를 들면, 아래 소스와 같이 지정한 범위를 넘어가지 못하게 하는 방법이 있다.

 

function PopMove(e){
    if (!MoveEnabled) return;

    limitX = document.body.clientWidth - 500; // 500은 레이어 크기를 감안해서 빼줌
    limitY = document.body.clientHeight;
    if (isIE){
        if (limitX < nowX+event.clientX-offsetx || limitY < nowY+event.clientY-offsety) return;
    } else {
        if (limitX < nowX+e.clientX-offsetx || limitY < nowY+e.clientY-offsety) return;
    }

    document.getElementById("PopupLayer").style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
    document.getElementById("PopupLayer").style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
    return false;
}

신고

'Script > Dom' 카테고리의 다른 글

dom 정리  (0) 2011.11.21
이미지뷰 lightbox  (0) 2010.08.25
드래그 가능한 레이어 팝업  (0) 2010.08.25
바르지 않는 표현 - 추천 하는 표현  (0) 2008.04.25
Dom 사용방법  (0) 2008.04.25
브라우저별 객체 판별 스크립트  (0) 2008.04.25
Posted by 고시랑
이전버튼 1 2 3 4 5 6 이전버튼

티스토리 툴바