Drag & Drop Table Columns For Bootstrap
File Size: | 10.7 KB |
---|---|
Views Total: | 22205 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.