[함수]수정) JAVASCRIPT로 레이어(기타등등) 이동(드래그)하기, FF가능버전

<style type="text/css">
.drag { position: relative; cursor:move }
</style>
<script type="text/javascript">
///------------ 마우스로 객체 드래그
var bdown = false;
var x, y;
var sElem;
//------------------------------------- 숫자 NaN체커
function changeInt(num){ //수평선 님 추가
    var temp = parseInt(num);
    if(isNaN(temp)){
        temp = 0;
    }
    return temp;
}
//------------------------------------ IE/FF 공용처리
function mlayer_down(e) {
  evt = e||window.event;
  stop_bubble(evt)
        sElem = evt.target || evt.srcElement ;
    if(sElem.className == "drag") {
        bdown = true;
        x = evt.clientX;
        y = evt.clientY;
    }
}
function mlayer_up() {
    bdown = false;
}
function mlayer_move(e) {
    if(bdown) {
 evt = e||window.event;
 stop_bubble(evt)
        var distX = changeInt(evt.clientX) - x;
        var distY = changeInt(evt.clientY) - y;
        sElem.style.left =(changeInt(sElem.style.left) + distX)+'px';
        sElem.style.top  = (changeInt(sElem.style.top) + distY)+'px';
        x = changeInt(evt.clientX);
        y = changeInt(evt.clientY);
        return false;
    }
}
function stop_bubble(evt){
  if(window.event){
  window.event.returnValue = true;   
  }else{
  evt.stopPropagation();
  evt.preventDefault()
  }
}
//------------------- 이벤트 등록
if (!document.all){
    //FF도 될 수 있도록
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=mlayer_down;
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = mlayer_move;
    document.captureEvents(Event.MOUSEUP);
    document.onmouseup = mlayer_up;
}
else{
    document.onmousedown = mlayer_down;
    document.onmousemove = mlayer_move;
    document.onmouseup = mlayer_up;
}
</script>
---------------=-------------------
위 스크립트를 첨부하고
<img class='drag' src='xxxx.jpg'>
처럼 하면 됩니다.
그리고나서 이미지를 이동해보세요.

--------------------------------------------=------------------
FF와 IE의 구별은 document.all 로 합니다.
사실 이렇게 하는것 보다는 브라우저 이름 읽어와야하지만,
IE가 .all을 혼자 쓰기 때문에...
----------------------------------------------=-------------
사용하실 때는
"공대여자는 예쁘다."
를 가슴 속으로 외치고 사용하세요.

-mins가 적었어요.

댓글
  • 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