0

このコードは、divのグリッドを作成するために正常に機能します。 

for (var i = 0; i < 10; i++) { // rows
    for (var j = 0; j < 6; j++) { // columns
        var id = String.fromCharCode(65 + j) + i; // e.g., B1
        $('<div></div>').data('accepts', id).appendTo("#cardSlots").droppable({
            accept: '#cardPile div',
            hoverClass: 'hovered',
            drop: handleCardDrop
        }); 
    }
$("cardSlots").append("<br />");
}

...しかし、ウィンドウのサイズを変更すると、divが次の行に移動することがあります。6x10の固定サイズのテーブルが必要ですが、divの代わりにテーブルを作成しようとすると、「droppable」プロパティが壊れます。

上記のコードを書き直して、各セルをドロップ可能な6x10のhtmlテーブルを作成するにはどうすればよいですか？

4

3 に答える 3

1

jQueryUIのSortableライブラリを試してください。

http://jqueryui.com/demos/sortable/

クラス名またはID名だけでソート可能なオブジェクトを指定できます。

于 2012-05-11T21:25:45.403 に答える
0

を作成する必要があります<table>。各セルに、ドロップ可能なオブジェクトがアタッチされたdivを配置します。width:100%;height:100%;

これはあなたの問題を解決します

于 2012-05-15T20:50:17.347 に答える
0

OK、これを正しく行うために私が学ぶ必要があることが2つありました。1つ目は、appendToがtdをtr内に配置することを知っているほど賢いということです。したがって、この行により、テーブル行をその場で作成できます。

$('<tr></tr>').appendTo("#grid");

2つ目は、最後の（つまり、最後に書き込まれた）テーブル行を次のように識別できることです。

appendTo("#grid tr:last")

したがって、最終結果（そして、それは完璧に機能します、Mikeに感謝します！）は次のようになります。

for (var i = 0; i < 10; i++) { // rows
    $('<tr></tr>').appendTo("#grid");
    for (var j = 0; j < 6; j++) { // columns
        var id = String.fromCharCode(65 + j) + i; // e.g., B1

        $('<td id="'+id+'"><div>' + id +'</div></td>').data('accepts', id).appendTo("#grid tr:last").droppable({
            accept: '#stack div',
            hoverClass: 'hovered',
            drop: handleCardDrop
        });
    }
}

于 2012-05-16T18:21:35.543 に答える