[함수]수정) 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}}
    -