jQuery 공작소 : 우리가 남이가 (드래그하면 같이 움직이는 얼굴들)

<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="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><br><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><br><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
    </div><div class="hannara">
        <img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/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>