Arrastrar y soltar filas en una tabla con respecto a otra tabla

Hola, tengo dos tablas con el mismo número de filas. Por ejemplo, si trato de ordenar una fila (digamos row-3) en una tableOne, la fila exacta (fila-3) en otra tabla (tableTwo) también debe ser ordenable. ¿Hay alguna forma de lograr esto?

Me he dado cuenta de Sortable Jquery UI wwidget, donde podemos arrastrar y soltar filas en la tabla o en otra tabla cuando tenemos dos tablas. Pero mi caso es diferente como se indicó anteriormente. por favor, hágamelo saber cualquier trabajo alrededor.

Ya trabajé en esto antes de ver que se puso en espera, así que solo agregaré el jsfiddle actualizado. Breve explicación, uso del evento mouseover de la ventana para mover la tabla. Dos filas alrededor, usando desplazamientos calculados de tableOne a tableTwo diferencias de posición. En el evento de inicio ordenable, realice un seguimiento de las filas en movimiento, que se pueden usar en el evento mouseover ventana. Luego, en el evento de cambio ordenable, mueva el marcador de posición en la tabla Dos para reflejar el cambio en tableOne. Finalmente, en el evento sortable beforeStop, reinicie el “estado” guardado en el evento de inicio ordenable.

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); } }); 

Respuesta original:

Puede ser una forma "más limpia" de hacer esto, pero esto hace el trabajo. La idea es dar a cada fila de cada tabla una "identificación de fila", y en el evento beforeStop de ordenable, obtener la posición del elemento movido de tableOne, encontrar la fila correspondiente en la tabla Id de dos por fila, luego mover la fila de tabelTwo a la misma posición esa fila TableOne se movió a.

https://jsfiddle.net/s73adk01/4/

HTML

 
Row 1
Row 2
Row 3
Row 4
Row 5

Row 1
Row 2
Row 3
Row 4
Row 5

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); } });