Author: | sindu12jun |
---|---|
Views Total: | 6,425 views |
Official Page: | Go to website |
Last Update: | September 19, 2018 |
License: | MIT |
Preview:

Description:
table-dragger is a dependency-free JavaScript library that allows to reorder table rows/columns via mouse drag & drop and touch tap & swipe. Also comes with an animation when moving items.
Basic usage:
Import the table-dragger into your project or include the table-dragger.min.js script directly in the html document.
npm install table-dragger --save
<script src="/path/to/table-dragger.min.js"></script>
Add the CSS class ‘handle’ to the html table headers and or cells where you want to display the drag handlers.
<table id="table"> <thead> <tr> <th class='handle'>Header 1</th> <th class='handle'>Header 2</th> <th class='handle'>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </tbody> </table>
The JavaScript to active the reordering functionality on the html table.
var el = document.getElementById('table'); var dragger = tableDragger(el, { dragHandler: '.handle' });
All possible options with default values.
var el = document.getElementById('table'); var dragger = tableDragger(el, { // or 'row', 'free' mode: 'column', // default: the first row or column dragHandler: '', // for 'row' mode onlyBody: false, // animation speed animation: 300 });
Events.
dragger.on('drop',function(){ // Arguments: oldIndex, newIndex, el, mode }); dragger.on('drag',function(){ // Arguments: el, mode }); dragger.on('shadowMove',function(){ // oldIndex, newIndex, el, mode }); dragger.on('out',function(){ // Arguments: el, mode });
Changelog:
09/19/2018
- Bugfix
This JS is not working in IE. Anyone have faced this issue? Does this issue fixed? Working fine in Chrome.