[jQuery] 이미지 Mouse Drag 기능

글을 작성할 때 제일 고민되는 부분이 글제목을 정하는 부분이다. 제목 짓기 너무 어려워!!

헛소리는 그만하고.. 여전히 코딩 작업을 진행 중인데 게시판 같은 데서 이미지 크게 보기를 해서 팝업으로

이미지만 보여주는 창이 있을 때 팝업의 이미지를 마우스 드래그로 움직이는 기능이 필요해서 만들어봤다.

<div><img src=”abc.jpb” width=”1000″ height=”700″ class=”draggable” style=”position:relative;left:0;top:0;”></div>

<script>

$(function() {

    var is_draggable = false;

    var x = y = 0;

    var pos_x = pos_y = 0;

    $(“.draggable”).mousemove(function(e) {

        if(is_draggable) {

            x = parseInt($(this).css(“left”)) – (pos_x – e.pageX);

            y = parseInt($(this).css(“top”)) – (pos_y – e.pageY);

            pos_x = e.pageX;

            pos_y = e.pageY;

            $(this).css({ “left” : x, “top” : y });

        }

        return false;

    });

    $(“.draggable”).mousedown(function(e) {

        pos_x = e.pageX;

        pos_y = e.pageY;

        is_draggable = true;

        return false;

    });

    $(“.draggable”).mouseup(function() {

        is_draggable = false;

        return false;

    });

    $(“.draggable”).dblclick(function() {

        window.close();

    });

});

</script>

움직일 이미지에 position:relative 속성을 줘야 하고.. mousedown(), mouseup(), mousemove() 를 이용했다.