<style>
body {
background:00ced1
}
#draggable_wrapper {
width:400px; height:400px;
}
#draggable_wrapper > .draggable {
width: 92px; height: 92px; z-index: 110; position:absolute;
}
#gallery_wrapper {
position:absolute; left:600px; top:200px; width:310px; height:500px;
}
#gallery_wrapper > div {
width: 92px; height: 92px; margin:1px; float:left; opacity: 0.5
;
}
</style>
여기서 > 부등호 표시가 의미하는게 뭔가요? 대충 프로그램 실행시켜보면서 어떤 부분인지는 알겠는데 자세한 의미는 모르겠습니다.
$(document).ready(function(){
var count = 0;
var piece = $('#draggable_wrapper > div'); // piece와 gallery에도 이 부등호를 사용한게 들어가있는데 어떤 뜻인지..
var gallery = $('#gallery_wrapper > div');
var cnt = 0;
gallery.each(function(i){
var dropper = $(this);
var targetPiece = piece.eq(dropper.index());
dropper.droppable({
accept:targetPiece,
drop:function(){
var tg = $(this);
var tx = tg.offset().left;
var ty = tg.offset().top;
targetPiece.animate({left:tx, top:ty
},{
duration:400, complete:function(){
cnt++;
if(cnt == 9) {
piece.remove();
gallery.css({
opacity:1,
margin:0
이 부분은 어떻게 해석을 해야 할까요? 프로그램 실행 기능으로 설명드리자면
분산되어 있는 img 파일을 gallery 라는 완성된 이미지 파일에 알맞게 맞추는 퍼즐 같은 형식입니다.
그래서 알맞은 곳에 맞췄다면 complete function으로 cnt를 증가시키면서 cnt가 9가 되면 투명도를 1, margin을 0으로 해서 완전한 그림으로 만들어주는 부분인데요.
offset의 활용이유와 변수에 $(this)를 활용해주는 이유, accept:targetpiece가 의미하는것
targetpiece 변수에 eq함수(?)가 들어가있는 이유가 무엇인지?? 궁금합니다
