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 时，我破坏了“可放置”属性。

如何重写上面的代码，以便创建一个 6x10 的 html 表，其中每个单元格都是可放置的？

4

3 回答 3

1

试试 jQuery UI 的 Sortable 库：

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

您可以仅按类或 ID 名称指定要排序的对象。

于 2012-05-11T21:25:45.403 回答
0

您应该创建一个<table>, 并在每个单元格中放置一个 div 并附上 droppable 和width:100%;height:100%;

这将解决您的问题

于 2012-05-15T20:50:17.347 回答
0

好的，我需要学习两件事才能正确地做到这一点。第一个是 appendTo 足够聪明，可以知道将 td 放入 tr 中，所以这一行允许我动态创建表行：

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

第二个是我可以识别最后一个（即最近写入的）表行，如下所示：

appendTo("#grid tr:last")

所以最终的结果（它工作得很好，谢谢迈克！）是这样的：

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