div 드래그로 이동 > JQuery & JavaScript

STUDY ROOM

JQuery & JavaScript

div 드래그로 이동

페이지 정보

작성자 JMStudy 작성일12-11-21 16:23 조회8,410회 댓글0건

본문

<div id='drag' onmouseover="style.cursor='move'" onmousedown="start_drag('drag');"></div>

<script type="text/javascript">
var mouseDown;
var startDrag= false;
function move(){
    if(startDrag){
        mouseDown.style.left = x + event.clientX - pre_x;
        mouseDown.style.top  = y + event.clientY - pre_y;
        return false;
    }//if
}//drag_move

function start_drag(drag){
    mouseDown = document.getElementById(drag);
    //x,y
    x = parseInt(mouseDown.style.left);
    y = parseInt(mouseDown.style.top);
    pre_x = event.clientX;
    pre_y = event.clientY;

    //drag flag
    startDrag = true;
    //move
    mouseDown.onmousemove = move;
    //stop
    mouseDown.onmouseup = stop;
}

function stop(){
    startDrag=false;
}// drag_release
</script>


댓글목록

등록된 댓글이 없습니다.