javascript - JQuery 用户界面 : How to define sortable td tags of a Table?

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 并且 helper 将被绝对定位。 也许，而不是使用表，你可以使用一个列表... https://jqueryui.com/sortable/#display-grid

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

进行初始化

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

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