jQuery 使用拖放重新排列 HTML 表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2072848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reorder HTML table rows using drag-and-drop
提问by Farshad
I have a jQuery function to move table rows up and down. I do not know how to save the data, nor get the position of each row. I am using PHP to show the table rows.
我有一个 jQuery 函数来上下移动表格行。我不知道如何保存数据，也不知道每一行的位置。我正在使用 PHP 来显示表格行。
How do I get each table row position value when the user reorders the table rows?
当用户重新排序表格行时，如何获取每个表格行位置值？
采纳答案by Farshad
thanks to Jim Petkus that did gave me a wonderful answer . but i was trying to solve my own script not to changing it to another plugin . My main focus was not using an independent plugin and do what i wanted just by using the jquery core !
感谢 Jim Petkus 确实给了我一个精彩的答案。但我试图解决我自己的脚本而不是将其更改为另一个插件。我的主要重点不是使用独立的插件，而是通过使用 jquery 核心来做我想做的事！
and guess what i did find the problem .
猜猜我发现了什么问题。
var title = $("em").attr("title");
$("div").text(title);
this is what i add to my script and the blew codes to my html part :
这是我添加到我的脚本和我的 html 部分的自爆代码：
<td> <em title=\"$weight\">$weight</em></td>
and found each row $weight value
并找到每一行 $weight 值
thanks again to Jim Petkus
再次感谢 Jim Petkus
回答by Jim Petkus
The jQuery UI sortable pluginprovides drag-and-drop reordering. A save button can extract the IDs of each item to create a comma-delimited string of those IDs, added to a hidden textbox. The textbox is returned to the server using an async postback.
jQuery UI排序插件提供拖放重新排序。保存按钮可以提取每个项目的 ID，以创建这些 ID 的逗号分隔字符串，并添加到隐藏的文本框中。使用异步回发将文本框返回到服务器。
This fiddle examplereorders table elements, but does not save them to a database.
这个小提琴示例重新排序表元素，但不会将它们保存到数据库中。
The sortable plugin takes one line of code to turn any list into a sortable list. If you care to use them, it also provides CSS and images to provide a visual impact to sortable list (see the example that I linked to). Developers, however, must provide code to retrieve items in their new order. I embed unique IDs of each item in the list as an HTML attribute and then retrieve those IDs via jQuery.
sortable 插件只需一行代码即可将任何列表转换为可排序列表。如果您愿意使用它们，它还提供 CSS 和图像来为可排序列表提供视觉效果（请参阅我链接到的示例）。但是，开发人员必须提供代码以按新订单检索项目。我将列表中每个项目的唯一 ID 作为 HTML 属性嵌入，然后通过 jQuery 检索这些 ID。
For example:
例如：
// ----- code executed when the document loads
$(function() {
wireReorderList();
});
function wireReorderList() {
$("#reorderExampleItems").sortable();
$("#reorderExampleItems").disableSelection();
}
function saveOrderClick() {
// ----- Retrieve the li items inside our sortable list
var items = $("#reorderExampleItems li");
var linkIDs = [items.size()];
var index = 0;
// ----- Iterate through each li, extracting the ID embedded as an attribute
items.each(
function(intIndex) {
linkIDs[index] = $(this).attr("ExampleItemID");
index++;
});
$get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(",");
}
回答by NateS
Apparently the question poorly describes the OP's problem, but this question is the top search result for dragging to reorder table rows, so that is what I will answer. I wasn't interested in bringing in jQuery UI for something so simple, so here is a jQuery only solution:
显然，这个问题没有很好地描述了 OP 的问题，但这个问题是拖动以重新排序表行的最佳搜索结果，所以这就是我要回答的。我对为这么简单的事情引入 jQuery UI 不感兴趣，所以这里是一个 jQuery 唯一的解决方案：
<style>
.grab { cursor: grab; }
.grabbed { box-shadow: 0 0 13px #000; }
.grabCursor, .grabCursor * { cursor: grabbing !important; }
</style>
<table>
<tr><th>...</th></tr>
<tr><td class="grab">☰</td><td>...</td></tr>
</table>
<script>
$(".grab").mousedown(function (e) {
var tr = $(e.target).closest("TR"), si = tr.index(), sy = e.pageY, b = $(document.body), drag;
if (si == 0) return;
b.addClass("grabCursor").css("userSelect", "none");
tr.addClass("grabbed");
function move (e) {
if (!drag && Math.abs(e.pageY - sy) < 10) return;
drag = true;
tr.siblings().each(function() {
var s = $(this), i = s.index(), y = s.offset().top;
if (i > 0 && e.pageY >= y && e.pageY < y + s.outerHeight()) {
if (i < tr.index())
tr.insertAfter(s);
else
tr.insertBefore(s);
return false;
}
});
}
function up (e) {
if (drag && si != tr.index()) {
drag = false;
alert("moved!");
}
$(document).unbind("mousemove", move).unbind("mouseup", up);
b.removeClass("grabCursor").css("userSelect", "none");
tr.removeClass("grabbed");
}
$(document).mousemove(move).mouseup(up);
});
</script>
Note si == 0and i > 0ignores the first row, which for me contains THtags. Replace the alertwith your "drag finished" logic.
注意si == 0并i > 0忽略第一行，对我来说它包含TH标签。替换为alert您的“拖动完成”逻辑。
回答by Javier Gutierrez
I working well with it
我用它工作得很好
<script>
$(function () {
$("#catalog tbody tr").draggable({
appendTo:"body",
helper:"clone"
});
$("#cart tbody").droppable({
activeClass:"ui-state-default",
hoverClass:"ui-state-hover",
accept:":not(.ui-sortable-helper)",
drop:function (event, ui) {
$('.placeholder').remove();
row = ui.draggable;
$(this).append(row);
}
});
});
</script>
回答by Sergio
Easy for plugin jquery TableDnd
易于插件 jquery TableDnd
$(document).ready(function() {
// Initialise the first table (as before)
$("#table-1").tableDnD();
// Make a nice striped effect on the table
$("#table-2 tr:even').addClass('alt')");
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
$("#table-2").tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Row dropped was "+row.id+". New order: ";
for (var i=0; i<rows.length; i++) {
debugStr += rows[i].id+" ";
}
$(table).parent().find('.result').text(debugStr);
},
onDragStart: function(table, row) {
$(table).parent().find('.result').text("Started dragging row "+row.id);
}
});
});
Plugin (TableDnD): https://github.com/isocra/TableDnD/
插件（TableDnD）：https: //github.com/isocra/TableDnD/
Demo: http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/
演示：http: //jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/
CDN: https://cdn.jsdelivr.net/jquery.tablednd/0.8/jquery.tablednd.0.8.min.js
CDN：https: //cdn.jsdelivr.net/jquery.tablednd/0.8/jquery.tablednd.0.8.min.js
回答by Kuroki Kaze
You may want to look at jQuery Sortable. I used it to reorder table rows.
你可能想看看jQuery Sortable。我用它来重新排序表行。
