JQuery-UI：如何定义表的可排序td标签？

Question

我正在使用JQuery-UI的Sortable对表的每一行的td标签进行排序，如下所示：

$(".scheduler").children('tbody')
    .children('tr').sortable({
    revert: true
});

但我发现出现了其他列。 这是JsFiddle链接。 谁能给我建议？

附加问题 ：我可以对整个表而不是每一行的td标签进行排序吗？ （当前，我只能对相同行的td标签进行排序。我想拖动一个td并替换为不同行的另一个td标签）

Answer 1

关于额外的列，它被渲染，因为当您开始拖动项目时，jQuery UI sortable会向该行添加一个占位符元素。 您可以通过使用以下方法解决此问题

helper: "clone"

仍将添加占位符，但将display: none要拖动的原始元素display: none ，并且辅助元素将被绝对定位。 也许可以不用列表，而可以使用列表… https://jqueryui.com/sortable/#display-grid

关于对整个表进行排序，我无法想象使用jQuery UI可排序的简单方法。 到目前为止，我实现的最佳行为是使用进行初始化

$(".scheduler").sortable({
    items: "td"
});

但只会将表格单元格从一行移到另一行，从而导致越来越多的列添加到表格中。

Answer 2

使你这样的jQuery代码

$(".scheduler tr").sortable({
    revert: true
});

我在jsfiddle上尝试过这个并用于td排序