티스토리 뷰

웹개발/Jquery

jquery dragNdrop 구현

야쿠 yaku 2012.06.07 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 dragNdrop 구현  (0) 2012.06.07
jquery.Callback 소개  (0) 2012.05.09
jquery xml 를 ie가 파싱 못할 경우 .  (0) 2012.03.15
my jQuery Plugin Module Patten Sample  (0) 2012.03.12
댓글
댓글쓰기 폼