JQuery-UI:如何定义一个表的可排序标签

JQuery-UI : How to define sortable td tags of a Table?

本文关键字:一个 标签 排序 何定义 定义 JQuery-UI      更新时间:2023-09-26

我使用JQuery-UI的Sortable来排序我的表的td标签的每一行

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

,但我发现额外的列已经出现。这里是JsFiddle链接。谁能给我一些建议?

附加问题:我可以对整个表的td标签排序而不是每一行吗?(目前我只能对相同行的标签进行排序。我想拖动一个td并替换为另一个td标签(不同行的)

关于额外的列,它被呈现,因为当您开始拖动一个项目时,jQuery UI可排序将一个占位符元素添加到该行。您可以使用

来解决这个问题
helper: "clone"

占位符仍将被添加,但要拖动的原始元素将获得display: none,并且helper将被绝对定位。也许,您可以使用列表代替表…https://jqueryui.com/sortable/#display-grid

关于排序整个表,没有简单的方法我可以想象使用jQuery UI可排序。到目前为止,我实现的最佳行为是使用

进行初始化
$(".scheduler").sortable({
    items: "td"
});

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

让你的jquery代码像这样

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

我在jsfiddle上尝试了这个,并为td排序

工作
相关文章: