jQuery Plugin To Create Draggable Table Data - tableDragAndDrop
File Size: | 8.75 KB |
---|---|
Views Total: | 3339 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tableDragAndDrop is a jQuery plugin which allows you to make table rows / columns draggable and droppable via left or right mouse click. Without the need of jQuery UI library for draggable functionality.
How to use it:
1. Include the jQuery tableDragAndDrop plugin after you have jQuery library installed in the webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="lib/tabledragdrop.js"></script>
2. Call the plugin on the target table.
$('#target').tabledragdrop({"selector": "#target"});
3. You can use the CSS class noDrag to disable the drag'n'drop functionality on specified table rows or columns.
<th class="noDrag">fixed col</th> <th class="noDrag">Fixed row</th>
4. Style the drag'n'drop handler.
table th { cursor: pointer; } table th.noDrag { cursor: not-allowed; } .drag_freeze { background: #bbb; color: #888; } .ghost { background: #cdfff8; position: absolute; z-index: 10000; } .arrow_down { display: block; position: absolute; z-index: 10000; width: 16px; height: 16px; background: url('arrow-down.png') no-repeat bottom center; } .arrow_right { display: block; position: absolute; z-index: 10000; width: 16px; height: 16px; background: url('arrow-right.png') no-repeat center right; }
This awesome jQuery plugin is developed by m00nk. For more Advanced Usages, please check the demo page or visit the official website.