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}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.11
5.12
5.13
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1