Drag & Drop Table Columns For Bootstrap

A super tiny jQuery plugin which allows you to re-sort the Bootstrap table columns using drag and drop. Without the need of any 3rd drag and drop library such as jQuery UI.

How to use it:

1. Download and include the plugin's files on your Bootstrap page.

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

2. Add the CSS class 'dnd-moved' to your table's tr elements:

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

3. Active the plugin by calling the function on the table element.

$('.table').dragableColumns();

4. Apply your own CSS styles to the html table when dragging and dropping.

th[draggable] a, th[draggable] { cursor: move; }

th[draggable] a:hover, th[draggable] a {
  display: block;
  text-decoration: none;
  color: #333333;
}

.drag {
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0.25
}

.dnd-drag { opacity: 0.25 }

.over { background-color: rgba(0, 0, 255, 0.35); }

5. Plugin's default settings.

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

Change log:

2017-06-28

• Add onDragEnd callback as option for getting columns positions on drag end

2017-06-21

• Fix jQuery 3.x compatibility

---

This awesome jQuery plugin is developed by alexshnur. For more Advanced Usages, please check the demo page or visit the official website.