Reorder HTML table rows using drag-and-drop

Question

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   How do I get each table row position value when the user reorders the table rows

User · Answer

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:

_x000D_

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

_x000D_

.grab {
  cursor: grab;
}

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

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

_x000D_

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

_x000D_

Note si == 0 and i > 0 ignores the first row, which for me contains TH tags. Replace the alert with your "drag finished" logic.

User · Answer

Building upon the fiddle from  tim  this version tightens the scope and formatting  and converts bind   - gt  on    It s designed to bind on a dedicated td as the handle instead of the entire row  In my use case  I have input fields so the  quot drag anywhere on the row quot  approach felt confusing  Tested working on desktop  Only partial success with mobile touch  Can t get it to run correctly on SO s runnable snippet for some reason     x000D   x000D  let ns       drag   e    gt        let el     e target         d      body          tr   el closest  tr          sy   e pageY        drag   false        index   tr index         tr addClass  grabbed         function move e          if   drag  amp  amp  Math abs e pageY - sy   lt  10          return        drag   true        tr siblings   each function             let s     this             i   s index              y   s offset   top          if  e pageY  gt   y  amp  amp  e pageY  lt  y   s outerHeight                i  lt  tr index     s insertAfter tr    s insertBefore tr             return false                                 function up e          if  drag  amp  amp  index     tr index            drag   false         d off  mousemove   move  off  mouseup   up           d off  touchmove   move  off  touchend   up     failed attempt at touch compatibility       tr removeClass  grabbed              d on  mousemove   move  on  mouseup   up         d on  touchmove   move  on  touchend   up             document  ready      gt         body   on  mousedown touchstart     drag   ns drag       x000D   grab     cursor  grab    user-select  none    tr grabbed     box-shadow  4px 1px 5px 2px rgba 0  0  0  0 5      tr grabbed active     user-input  none     tr grabbed active       user-input  none    cursor  grabbing  important    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt table gt     lt thead gt       lt tr gt         lt th gt  lt  th gt         lt th gt Drag the rows below    lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td class  grab  gt  amp vellip  lt  td gt         lt td gt  lt input type  text  value  Row 1    gt  lt  td gt       lt  tr gt       lt tr gt         lt td class  grab  gt  amp vellip  lt  td gt         lt td gt  lt input type  text  value  Row 2    gt  lt  td gt       lt  tr gt       lt tr gt         lt td class  grab  gt  amp vellip  lt  td gt         lt td gt  lt input type  text  value  Row 3    gt  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

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    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      lt td gt   lt em title    weight   gt  weight lt  em gt  lt  td gt    and found each  row  weight value   thanks again to  Jim Petkus

User · Answer

I working well with it   lt script gt        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                                      lt  script gt

User · Answer

You may want to look at jQuery Sortable  I used it to reorder table rows

User · Answer

Easy for plugin 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 lt 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   Demo  http   jsfiddle net DenisHo dxpLrcd9 embedded result   CDN  https   cdn jsdelivr net jquery tablednd 0 8 jquery tablednd 0 8 min js

User · Answer

The jQuery UI sortable plugin provides 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   This fiddle example reorders 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   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   lt   txtExampleItemsOrder ClientID   gt    value   linkIDs join

[jquery] Reorder HTML table rows using drag-and-drop

Examples related to jquery