jQuery로 그리드 작성 및 스냅

Question

그리드 안의 "박스"각각에 이미지를 저장할 수있는 그리드를 만들려고합니다.

크기가 80px * 80px 인 이미지를 사용하여 반복적으로 "모양이 좋아 보이는"그리드를 만들었습니다. 당신은 여기를 확인하실 수 있습니다

$(function() { 
    $("#draggable5").draggable({ 
     grid: [80, 80] 
    }); 
}); 

: http://jsfiddle.net/SvZMr/1/

는 내가하고 싶은, 사용하는 것입니다 그리고 내가 아닌 올바른 방법으로, 내가 실현하려 원하는 것을 표시하는 기능을 가지고 있습니다 스냅 기능 : JSFIDDLE에서

$("#draggable2").draggable({ snap: ".CityContainer" }); 

이 난 단지는 .CityContainer에 스냅보다 노란색 사각형이있다. 이 스퀘어가 내 눈금의 각 사각형에 스냅 할 수 있기를 원합니다 (80 * 80 격자로 움직이는 파란색 사각형과 같습니다).

내 질문은 내가 원하는 것을 달성하기 위해입니다. 다음과 같이 격자의 각 div를 수동으로 만들어야합니까?

<div class="square s1"></div> 
<div class="square s2"></div> 

등등? 플러그인이없는 쉬운 방법이 있습니까?

960px 와이드 컨테이너 fx에서 10 * 10px 격자가 필요하면 많은 시간이 걸립니다.

나를 도울 수 있기를 바랍니다. :-)

Answer 1

예를 들어 추가로 jquery로 html 콘텐츠를 쉽게 만들 수 있습니다.

당신은 또한 ... 원인의, 바로 실행 순서 문제를 JQuery와 (정상 선택기)를 통해 생성 된 HTML에 액세스 할 수 있습니다

작은 예 :

for(var i = 0;i<50;i++){ 
    $(".CityContainer").append(
      "<div id='\"'draggable\"" + i 
      + " class=\"dropbox ui-widget-content\"></div>" 
     ); 
} 
$(".dropbox").droppable(); 

$("#draggable2").draggable({ snap: ".dropbox", grid: [80,80] }); 

나는 당신의 바이올린을 수정 한, 여기에서 찾으십시오 : http://jsfiddle.net/Elak/SvZMr/3/