우리가 남이가 (드래그하면 같이 움직이는 얼굴들)

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

이미지를 드래그하여 제어해 보는 예제입니다.
우리가 남이가? 아니죠 하나입니다.
이 예제는 씁쓸하군여 ..

예제 1
초원복집 - 우리가 남이가?
보기
얼굴을 마우스로 끌어 움직여 보세요. 다른 얼굴도 같이 움직입니다. 그들은 하나입니다. (우리가 남이가?)

초원복집



그들은 하나이기 때문에 모두 같이 움직입니다. 남이 아니랍니다.
소스
<style type="text/css">
    .css_test img {
        cursor : move;
        width : 100px;
    }
    .css_test .house {
        border-radius : 50px 50px 0 0;
        border : 5px solid red;
        font-size : 20pt !important;
        margin : 0 auto;
        padding : 20px;
        text-align : center;
        width : 500px;
    }
    .css_test .hannara {
        border-radius : 7px;
        border : 5px solid gray;
        display : inline-block;
        height : 150px;
        margin : 3px;
        position : relative;
        text-align : left;
        width : 160px;
    }
</style>

얼굴을 마우스로 끌어 움직여 보세요. 다른 얼굴도 같이 움직입니다. 그들은 하나입니다. (우리가 남이가?)<br><br>

<div class="css_test">
    <div class="house">초원복집</div>
    <div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><br><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><br><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div class="hannara">
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div>
</div>

<br>
그들은 하나이기 때문에 모두 같이 움직입니다. 남이 아니랍니다.

<script type="text/javascript">

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable({
        containment : 'parent', // 부모요소 안에 종속
        drag : function(){
            var pos = $(this).position(); // 드래그 하는 이미지의 위치값 알아내기
            // 현재 드래그 하는 이미지를 제외하고 위치값 설정
            $( '.css_test img' ).not( this ).css({ top : pos.top, left : pos.left });
        }
    })

</script>
관련 CSS
예제 2
참고 - 상식으로 알아두면 좋은 사건
보기
jQuery
관련 메서드 : .draggable() .position() .not() .css()

사건 안내 (나무위키) : 우리가 남이가