인터넷정보

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

알 수 없는 사용자 2007. 10. 11. 16:59
<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'>
처럼 하면 됩니다.
그리고나서 이미지를 이동해보세요.
반응형