This time I will share jQuery Plugin and tutorial about Drag & Drop Table Columns For Bootstrap, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="dragndrop.table.columns.css"> |
2 |
<script src="dragndrop.table.columns.js"></script> |
2. Add the CSS class ‘dnd-moved’ to your table’s tr elements:
3. Active the plugin by calling the function on the table element.
1 |
$('.table').dragableColumns(); |
4. Apply your own CSS styles to the html table when dragging and dropping.
01 |
th[draggable] a, th[draggable] { cursor: move; } |
03 |
th[draggable] a:hover, th[draggable] a { |
05 |
text-decoration: none; |
10 |
background-color: rgba(0, 0, 0, 0.25); |
14 |
.dnd-drag { opacity: 0.25 } |
16 |
.over { background-color: rgba(0, 0, 255, 0.35); } |
5. Plugin’s default settings.
1 |
$('.table').dragableColumns({ |
5 |
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.
