1

グリッド内の各「ボックス」に画像をスナップできるグリッドを作成しようとしています。

寸法が 80px*80px の画像を使用して「似ている」グリッドを作成し、それを繰り返すように設定しました。そして、達成したいことを示す関数がありますが、正しい方法ではありません:

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

ここで確認できます：http://jsfiddle.net/SvZMr/1/

私がやりたいことは、スナップ機能を使用することです：

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

JSFIDDLEには、 .CityContainerにスナップするだけの黄色の四角形があります。この正方形をグリッド内の各正方形にスナップできるようにしたい (80*80 グリッド内を移動する青い正方形のように)。

私の質問は次のとおりです。私が望むものを達成するために。次のように、グリッド内の正方形の各 div を手動で作成する必要がありますか?

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

等々？または、(プラグインなしで) もっと簡単な方法はありますか?

幅 960 ピクセルのコンテナー fx で 10*10 ピクセルのグリッドが必要な場合、かなりの時間がかかります。

あなたが私を助けてくれることを願っています。:-)

4

1 に答える 1

0

たとえば、jquery と append を使用して、オンザフライで HTML コンテンツを簡単に作成できます。

生成された html には jquery (通常のセレクター) を介してアクセスすることもできますが、実行順序だけが問題になります...

小さな例:

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/

于 2013-09-23T12:57:14.517 に答える