如何使用Javascript和jQuery创建一个表，使每个单元格都可以拖放？

此代码可以很好地创建div网格：

（var i=0；i<10；i++）{//行的

对于（var j=0；j<6；j++）{//列
var id=String.fromCharCode（65+j）+i；//例如B1
$（''）.data（'accepts'，id）.appendTo（“#cardSlots”）.dropable({
接受：“#卡片堆div”，
hoverClass:“悬停”，
滴落：手推车滴落
}); 
}
$（“cardSlots”）。追加（
）；
}

…但当我调整窗口大小时，div有时会滑到下一行。我想要一个固定大小为6x10的表，但是当我试图构建一个表而不是div时，我破坏了“droppable”属性

---

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

试试jQuery UI的可排序库：

---

您可以仅通过类或id名称指定可排序的对象。

您应该创建一个

，并在每个单元格中放置一个div，该div附带可拖放项，且

宽度：100%；身高：100%

这将解决您的问题
好的，我需要学习两件事才能正确地做到这一点。首先，appendTo足够聪明，知道如何将td放在tr中，因此这一行允许我动态创建表行：

$（“”）.appendTo（“#网格”）

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

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
        });
    }
}

（var i=0；i<10；i++）{//行的

$（''）。附加到（“#网格”）；
对于（var j=0；j<6；j++）{//列
var id=String.fromCharCode（65+j）+i；//例如B1
$（''+id+''）.data（'accepts'，id.）.appendTo（“#grid tr:last”）.dropable({
接受：“#堆栈div”，
hoverClass:“悬停”，
滴落：手推车滴落
});
}
}

谢谢您的建议——我想创建一个表，您可以将卡片拖到其中，而不是一个可排序的列表。
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
        });
    }
}