Demo page http://alexshnur.github.io/drag-n-drop-table-columns/
Work in IE9+, Google Chrome, Mozzila Firefox
<div class="table-responsive container">
<table class="table table-bordered">
<thead>
<tr class="dnd-moved">
<th>Column #1</th>
<th>Column #2</th>
<th>Column #3</th>
<th>Column #4</th>
<th>Column #5</th>
</tr>
</thead>
<tbody>
<tr class="dnd-moved">
<td>Row #1-1</td>
<td>Row #1-2</td>
<td>Row #1-3</td>
<td>Row #1-4</td>
<td>Row #1-5</td>
</tr>
<tr class="dnd-moved">
<td>Row #2-1</td>
<td>Row #2-2</td>
<td>Row #2-3</td>
<td>Row #2-4</td>
<td>Row #2-5</td>
</tr>
<tr class="dnd-moved">
<td>Row #3-1</td>
<td>Row #3-2</td>
<td>Row #3-3</td>
<td>Row #3-4</td>
<td>Row #3-5</td>
</tr>
</tbody>
</table>
</div>
To use jQuery 1.x
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/for-jQuery1.x/dragndrop.table.columns.min.js" type="text/javascript"></script>
<script>
$('.table').dragableColumns();
</script>
To use jQuery 3.x
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="dist/for-jQuery3.x/dragndrop.table.columns.min.js" type="text/javascript"></script>
<script>
$('.table').dragableColumns();
</script>
Parameters
drag - default boolean true.
dragClass - this is class for drag event default 'drag'.
overClass - this is class for over event default 'over'.
movedContainerSelector - default '.dnd-moved'.
onDragEnd - this is the function to which the parameter is passed colPositions = {array: [], object: {}}.