Drag and drop sorting of table columns with jQuery

Question

I\'m using jQuery to drive my AJAX UI. I have a table of data, and I want to allow the user to reorder the columns in the table by dragging and dropping them. I\'d like the

Answer 1

Sorttable jquery UI library appears to do exactly what you want here.

https://github.com/dbrink/sorttable/wiki http://plugins.jquery.com/project/sorttable

Answer 2

You should try Dragtable by Danvk

I found this question while searching for a fix to a bug in it though. It doesn't like tables positioned in horizontally scrolling panels.

Aside from this it's fantastic.

Answer 3

you mean something like this? Table Drag and Drop JQuery plugin

Answer 4

If you are willing to pay for a license you might try Ext JS instead of just jQuery. There are some pretty powerful grid features that include what you are trying to do.

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

Answer 5

There's a JQuery UI Widget called Dragtable.

Live demo

Answer 6

Try this instead:

$('.sort').sortable({
  cursor: 'move',
  axis: 'y',
  update: function(e, ui) {
    $(this).sortable('refresh');
    var params = {};
    params = $('.id').serializeArray(),
      $.ajax({
        type: 'POST',
        data: {
          id : params
        },
        url: 'Your url',
        success: function(msg) {
          // Your sorted data.
        }
      });
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>abc</th>
      <th>xyz</th>
    </tr>
  </thead>
  <tbody class="sort">
    <tr>
      <input class="id" name="id" type="hidden" value="Your Value" />
      <td class="center"><span>Text Here</span></td>
      <td>Yes, you are done</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>