<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>