相对于另一个表拖放表中的行 [英] Drag and drop rows in a table with respect to another table
问题描述
嘿，我有两个行数相同的表。例如，如果我尝试在tableOne中对行（例如row-3）进行排序，则其他表（tableTwo）中的确切行（row-3）也应该是可排序的。有没有办法实现这一点。
Hey I have two tables with equal number of rows. For example if I try to sort a row (say row-3) in a tableOne, the exact row (row-3) in other table(tableTwo) should also be sortable. Is there any way to achieve this.
我注意到Sortable Jquery UI wwidget，我们可以在表中拖放行，或者在我们有的时候将行拖放到另一个表中两张桌子。但我的情况与上述不同。请让我知道任何解决方法。
I have noticed Sortable Jquery UI wwidget, where we can drag and drop rows with in the table or in to another table when we have two tables. But my case different as stated above. please let me know any work around.
推荐答案
在看到它被搁置之前我已经完成了这个工作，所以我会只需添加更新的jsfiddle。简要说明，使用窗口鼠标悬停事件移动表格两行，使用从tableOne到tableTwo位置差异计算的偏移量。在可排序的启动事件中，跟踪可在窗口鼠标悬停事件中使用的移动行。然后，在sortable change事件中，在tableTwo中移动占位符以反映tableOne中的更改。最后，在可排序的beforeStop事件中，重置可排序的启动事件中保存的状态。
I already worked on this before seeing it was put on hold, so I'll just add the updated jsfiddle. Brief explanation, used window mouseover event to move the tableTwo row around, using offsets computed from tableOne to tableTwo position differences. In sortable start event, keep track of the moving rows, which can be used in window mouseover event. Then, in sortable change event, move the placeholder around in tableTwo to reflect the change in tableOne. Finally, on sortable beforeStop event, reset the "state" saved in sortable start event.
https://jsfiddle.net/s73adk01/10/
JS
$(".tableOne tr").each(function (idx) {
if (idx > $(".tableTwo tr").length)
return;
var $tableTwoTr = $(".tableTwo tr").eq(idx);
$(this).attr("data-row-id", idx);
$tableTwoTr.attr("data-row-id", idx);
});
var isDragging = false;
var $rowToDrag = null;
var $curUIHelper = null;
var $curPlaceholder = null;
var $curTableTwoPlaceholder = null;
$(window).on("mousemove", function () {
if (!isDragging)
return;
var topDiff = $(".tableOne").offset().top - $(".tableTwo").offset().top;
var leftDiff = $(".tableOne").offset().left - $(".tableTwo").offset().left;
$rowToDrag.css("position", "absolute");
$rowToDrag.offset({
top: $curUIHelper.offset().top - topDiff,
left: $curUIHelper.offset().left - leftDiff
});
});
$(".tableOne tbody").sortable({
start: function(e, ui) {
isDragging = true;
var rowId = $(ui.helper).attr("data-row-id");
$rowToDrag = $(".tableTwo tr[data-row-id='" + rowId + "']");
$curUIHelper = $(ui.helper);
$curPlaceholder = $(ui.placeholder);
$curTableTwoPlaceholder = $curPlaceholder.clone();
$curTableTwoPlaceholder.insertBefore($rowToDrag);
},
change: function(e, ui) {
var $placeholderNextRow = $curPlaceholder.next();
if ($placeholderNextRow.length <= 0) {
// At the end
$curTableTwoPlaceholder.insertAfter($(".tableTwo tbody tr").last());
}
else {
var nextRowID = $placeholderNextRow.attr("data-row-id");
var $tableTwoNextRow = $(".tableTwo tr[data-row-id='" + nextRowID + "']");
$curTableTwoPlaceholder.insertBefore($tableTwoNextRow);
}
},
beforeStop: function(e, ui) {
isDragging = false;
$rowToDrag.css({
position: "static",
left: 0,
top: 0
});
$curTableTwoPlaceholder.remove();
$rowToDrag = null;
$curUIHelper = null;
$curPlaceholder = null;
$curTableTwoPlaceholder = null;
var rowId = $(ui.helper).attr("data-row-id");
var newPosition = $(".tableOne tr:not(.ui-sortable-placeholder)")
.index($(ui.helper));
var $tableTwoRowToMove = $(".tableTwo tr[data-row-id='" + rowId + "']");
if (newPosition == 0) {
$tableTwoRowToMove.insertBefore($(".tableTwo tr").first());
}
else {
$tableTwoRowToMove.insertAfter($(".tableTwo tr").eq(newPosition));
}
// Flash so we can easily see that it moved.
$(ui.helper)
.css("background-color", "orange")
.animate({ backgroundColor: "white" }, 1000);
$tableTwoRowToMove
.css("background-color", "yellow")
.animate({ backgroundColor: "white" }, 1500);
}
});
原始答案：
Original answer:
这可能是一种更清洁的方式，但这可以完成工作。想法是给每个表中的每一行一个行id，并在sortable的beforeStop事件中，从tableOne获取被移动元素的位置，在tableTwo中找到行对应的行，然后将tabelTwo的行移动到相同的位置tableOne行移动到。
May be a "cleaner" way to do this, but this gets the job done. The idea is to give each row in each table a "row id", and on sortable's beforeStop event, get the position of the moved element from tableOne, find the corresponding row in tableTwo by row id, then move tabelTwo's row to the same position that tableOne row moved to.
https：// jsfiddle .net / s73adk01 / 4 /
HTML
<table class="tableOne">
<tbody>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
</tbody>
</table>
<br />
<table class="tableTwo">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
</table>
JS
$(".tableOne tr").each(function (idx) {
if (idx > $(".tableTwo tr").length)
return;
var $tableTwoTr = $(".tableTwo tr").eq(idx);
$(this).attr("data-row-id", idx);
$tableTwoTr.attr("data-row-id", idx);
});
$(".tableOne tbody").sortable({
beforeStop: function(e, ui) {
var rowId = $(ui.helper).attr("data-row-id");
var newPosition = $(".tableOne tr:not(.ui-sortable-placeholder)")
.index($(ui.helper));
var $tableTwoRowToMove = $(".tableTwo tr[data-row-id='" + rowId + "']");
if (newPosition == 0) {
$tableTwoRowToMove.insertBefore($(".tableTwo tr").first());
}
else {
$tableTwoRowToMove.insertAfter($(".tableTwo tr").eq(newPosition));
}
// Flash so we can easily see that it moved.
$(ui.helper)
.css("background-color", "orange")
.animate({ backgroundColor: "white" }, 1000);
$tableTwoRowToMove
.css("background-color", "yellow")
.animate({ backgroundColor: "white" }, 1500);
}
});
这篇关于相对于另一个表拖放表中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
