js_layer_move.js : 레이어 이동 스크립트

ex >
제어부분1
이동대상 1 

제어부분2
이동대상2






제어부분3 & 이동대상3

 

/*========================================
// 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){}
}

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📅 달력형