당겼다가 놓으면 제자리로 돌아가는 음식들

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

animate 메서드, jQuery UI의 이징(easing)효과와 draggable 을 사용한 간단한 예제입니다.
쉬운 예제로 그럴싸한 느낌이 나는 예제입니다. ^^;

+_+
예제 1
음식들의 귀소본능
보기
음식들을 드래그 했다가 놓아보세요~



소스
<style type="text/css">
    .css_test {
    }
    .css_test img {
        cursor : move;
    }
</style>

음식들을 드래그 했다가 놓아보세요~<br><br>

<div class="css_test">
    <img src="http://superkts.com/img/icon/food/fff22.gif" />
    <img src="http://superkts.com/img/icon/food/fff27.gif" />
    <img src="http://superkts.com/img/icon/food/fff28.gif" />
    <img src="http://superkts.com/img/icon/food/fo028.gif" />
    <img src="http://superkts.com/img/icon/food/fo035.gif" /><br><br>
    <img src="http://superkts.com/img/icon/food/food_fd32.gif" />
    <img src="http://superkts.com/img/icon/food/food09[1].gif" />
    <img src="http://superkts.com/img/icon/food/food_fd213.gif" />
</div>

<script type="text/javascript">

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable({
        stop : function(){ // 드래그 종료시 실행
            $(this).animate({ top : 0, left : 0 }, 1000, 'easeOutElastic' ); // 원위치로
            // 제이쿼리UI 의 이징효과 사용
        }
    })

</script>
관련 CSS
예제 2
참고
jQuery
애니메이션 메서드 : .animate()
이징 효과 : easing(이징) 효과 모음
음식 이미지 아이콘 모음 : http://superkts.com/readme/196