티스토리 뷰

웹개발/Jquery

jquery dragNdrop 구현

yaku 2012. 6. 7. 17:41

var makeDraggable = function(element) {
    element = jQuery(element);

    // Move the element by the amount of change in the mouse position
    var move = function(event) {
        if ( element.data('mouseMove') ) {
            var changeX = event.clientX - element.data('mouseX');
            var changeY = event.clientY - element.data('mouseY');

            var newX = parseInt(element.css('left')) + changeX;
            var newY = parseInt(element.css('top')) + changeY;

            element.css('left', newX);
            element.css('top', newY);

            element.data('mouseX', event.clientX);
            element.data('mouseY', event.clientY);
        }
    }

    element.mousedown(function(event) {
        element.data('mouseMove', true);
        element.data('mouseX', event.clientX);
        element.data('mouseY', event.clientY);
    });

    element.parents(':last').mouseup(function() {
        element.data('mouseMove', false);
    });

    element.mouseout(move);
    element.mousemove(move);
}

makeDraggable( "#box");

'웹개발 > Jquery' 카테고리의 다른 글

jQuery 잘하기  (0) 2014.02.26
제이쿼리 페이지 플러그인  (0) 2014.01.10
jquery.Callback 소개  (0) 2012.05.09
jquery xml 를 ie가 파싱 못할 경우 .  (0) 2012.03.15
my jQuery Plugin Module Patten Sample  (0) 2012.03.12
댓글
D-DAY
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함