如何使用JavaScript拖放表行以交换它们

How to drag and drop table rows to swap them using JavaScript?

本文关键字：交换 何使用 JavaScript 拖放      更新时间：2023-09-26

我正在尝试使用JQuery UI交换表行。它工作得很好，但我只是无法在拖放事件中获得行号。我需要知道我接下来的工作的排号，有人可以帮我吗?

。

$('#table1 tbody').sortable({
revert: true,
start: function(event, ui) {
    // get row number, such as (row) 1
},
stop: function(event, ui) {
    // get row number, such as (row) 3
}});

事实上，我不需要排序表行(只是交换)，如果有任何可能的解决方案，请让我知道…

将tr元素包裹在tbody中在拖拽tr时添加辅助克隆。只有这样你才能拖拽。

当拖动开始时，克隆被创建(因为helper: "clone")，并且c variable将保存对克隆和被拖动的tr的引用。当拖动停止时，如果它在一个可掉落的外部，克隆被摧毁。如果它在draggable中，我们销毁克隆和tr(这样它就从列表中删除了，不能再拖动了)

使用停止事件可以获得可拖动行数

 stop: function(ui, event){
        var id = event.item.index();
        alert(id);
    }

Try this

JsFiddle:

http://jsfiddle.net/Vn5SZ/31/

首先，不需要得到开始和停止的行号，因为它是相同的。

和知道行号只需给你的行数据属性:

data-rownumber=1

>

>
$('#table1 tbody').sortable({
revert: true,
stop: function(event, ui) {
    var row=ui.draggable.attr('data-rownumber'); 
//this will be the dragged row id
}});
相关文章：