Reordenar las filas de la tabla HTML usando arrastrar y soltar

Solución:

El complemento clasificable de la interfaz de usuario de jQuery proporciona un reordenamiento de arrastrar y soltar. Un botón de guardar puede extraer los ID de cada elemento para crear una cadena delimitada por comas de esos ID, agregada a un cuadro de texto oculto. El cuadro de texto se devuelve al servidor mediante una devolución de datos asincrónica.

Este ejemplo de violín reordena los elementos de la tabla, pero no los guarda en una base de datos.

El complemento ordenable toma una línea de código para convertir cualquier lista en una lista ordenable. Si desea usarlos, también proporciona CSS e imágenes para proporcionar un impacto visual a la lista ordenable (vea el ejemplo al que me vinculé). Sin embargo, los desarrolladores deben proporcionar código para recuperar elementos en su nuevo orden. Inserto ID únicos de cada elemento en la lista como un atributo HTML y luego recupero esos ID a través de jQuery.

Por ejemplo:

// ----- 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(",");
}

Aparentemente, la pregunta describe mal el problema del OP, pero esta pregunta es el resultado de búsqueda superior para arrastrar para reordenar las filas de la tabla, así que eso es lo que responderé. No estaba interesado en traer jQuery UI para algo tan simple, así que aquí hay una única solución de jQuery:

$(".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);
});

.grab {
  cursor: grab;
}

.grabbed {
  box-shadow: 0 0 13px #000;
}

.grabCursor,
.grabCursor * {
  cursor: grabbing !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th></th>
    <th>Table Header</th>
  </tr>
  <tr>
    <td class="grab">&#9776;</td>
    <td>Table Cell 1</td>
  </tr>
  <tr>
    <td class="grab">&#9776;</td>
    <td>Table Cell 2</td>
  </tr>
  <tr>
    <td class="grab">&#9776;</td>
    <td>Table Cell 3</td>
  </tr>
</table>

Nota si == 0 y i > 0 ignora la primera fila, que para mí contiene TH etiquetas. Reemplace la alert con su lógica de “arrastre terminado”.

Estoy trabajando bien con eso

<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>

---

---

Utiliza Nuestro Buscador