js_layer_move.js : 레이어 이동 스크립트 , 업그레이드

전에 한번 올린 것의 업그레이드 버전.
전에 올린건, 이벤트가 잃어나는 대상 자체가 움직이도록 되어있는데
이번에는
제어와 대상을 분리하였습니다.(물론 같이 할 수도 있습니다.)
이로인해 리모트 컨트롤 처럼 대상이 움직이도록 처리할 수도 있고,
윈도우 창의 titlebar처럼 그부분을 눌러야만 대상이 움직이도록 할 수 있게 되었습니다.

http://mins01.zerock.net/20070305/m_board/tech.php?b_id=tech&type=read&b_idx=334&page=1&sh1_ta=b_title&sh1_str=_move&period=all

예제는 위 링크 참고


/*========================================
// js_layer_move.js
// 레이어(또는 다른 객체)가 마우스로 이동할 수 있도록 해준다.
//
// ex> js_layer_move(document.getElementById('test1'),document.getElementById('test2'));
// ex> js_layer_move(document.getElementById('test2'));
// ex> js_layer_move([이동을 제어할 대상], [이동할 대상]);
// [이동할 대상] : 정해지지 않으면 [이동을 제어할 대상]이 [이동할 대상] 대상으로 정해진다.
// 저 코드를 실행 후 마우스로 이동시킬 수 있게 된다.
//
// 주의 : 해당 개체의 onmousedown,onmouseup,onmousemove 이벤트에 등록되어있던 함수는 사용할 수 없게된다.
// 이벤트를 중복되게 할 수 있지만, 대상을 이동하는데 방해가 되기 때문에 그냥 제거함.
//
연계
js_event_anti.js 에서 js_event_anti_stop_event() 를 사용한다.

// mins01,mins,공대여자
// MSN,NateOn : mins01(at)lycos.co.kr
// 2007-01-30
// 2007-03-31 : 이동대상 따로 지정할 수 있도록 바뀜
// "공대여자는 예쁘다."를 나타내야만 쓸 수 있습니다.
//========================================*/
//해당 개체가 이동이 가능하도록 자동 설정등을 바꿔준다.
function js_layer_move(this_s1,this_s2){    
//this_s1 : 이벤트를 받을 대상
//this_s2 : 이동을 할 대상 : 없으면 this_s1 과 같게 처리
// this_s1 이 이동처리되면 this_s2 가 이동하는 형식
if(!this_s2){this_s2=this_s1;}

//    this_s1.style.position='relative';
    this_s2.style.position='relative';
    this_s1.style.zIndex='9000';
    this_s2.style.zIndex='9000';
    try{
    this_s2.style.left='0px';
    this_s2.style.top='0px';
    }catch(e){}
    this_s1.style.cursor = "move";
    this_s1.onmousedown=    function(event){ js_layer_move_down(this_s2,event); }
    this_s1.onmouseup= js_layer_move_up;
    this_s1.onmouseout= js_layer_move_up;
    this_s1.onmousemove= js_layer_move_move;
}
///------------ 마우스로 객체 드래그
var bdown = false;
var x, y;
var js_layer_move_element = null;//이동되는 대상지정
//------------------------------------- 숫자 NaN체커
function changeInt(num){ //수평선 님 추가
    var temp = parseInt(num); if(isNaN(temp)){ temp = 0; }  return temp;
}
//------------------------------------ IE/FF 공용처리
function js_layer_move_down(this_s2,e) {
     var evt = e||window.event;
      js_layer_stop_bubble(evt)
    //js_layer_move_element = evt.target || evt.srcElement ;
    var this_s1 = evt.target || evt.srcElement ;
    js_layer_move_element = this_s2;
    if(this_s1.style.cursor == "move") {
        bdown = true;
        x = evt.clientX;
        y = evt.clientY;
    }
}
function js_layer_move_up() {
    bdown = false;
}
function js_layer_move_move(e) {
    if(bdown) {
     var evt = e||window.event;
     js_layer_stop_bubble(evt)
        var distX = changeInt(evt.clientX) - x;
        var distY = changeInt(evt.clientY) - y;
        js_layer_move_element.style.left =(changeInt(js_layer_move_element.style.left) + distX)+'px';
        js_layer_move_element.style.top  = (changeInt(js_layer_move_element.style.top) + distY)+'px';
        x = changeInt(evt.clientX);
        y = changeInt(evt.clientY);
        return false;
    }
}
function js_layer_stop_bubble(evt){
    if( typeof(js_event_anti_stop_event)!="function" ){
    return;
    }
    try{
     js_event_anti_stop_event(evt);
    }catch(e){}
}

출처 : 공대여자