Download .zip Download .tar.gz View on GitHub

Drag & Drop Table Columns v.0.1.3

Work in IE9+, Google Chrome, Mozzila Firefox

Column #1	Column #2	Column #3	Column #4	Column #5
Row #1-1	Row #1-2	Row #1-3	Row #1-4	Row #1-5
Row #2-1	Row #2-2	Row #2-3	Row #2-4	Row #2-5
Row #3-1	Row #3-2	Row #3-3	Row #3-4	Row #3-5

<link rel="stylesheet" href="css/dragndrop.table.columns.css" />

<table class="table table-bordered table-hover">
	<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>

To use jQuery 1.x

<script src="js/jquery-1.11.0.min.js"></script>
<script src="dist/for-jQuery1.x/dragndrop.table.columns.js"></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.js"></script>

<script>
$('.table').dragableColumns();
</script>

Use parameters for Drag Table Columns

$('.table').dragableColumns({
   drag: true,
   dragClass: 'drag',
   overClass: 'over',
   movedContainerSelector: '.dnd-moved'
});