How it works
Table-dragger is a minimalist plain Javascript library for building reorderable drag-and-drop table. table-dragger.
- Super easy to set up
- cellspacing, cellpadding, col and colgroup in account
- Able to sort columns or rows at the same time
- Smooth animation when sort
- No bloated dependencies
- Touch events
Basic Example
Default With no options, sort columns, handler was the first row
| Movie Title | Genre | Year | Gross |
|---|---|---|---|
| Star Wars | Adventure, Sci-fi | 1977 | $460,935,665 |
| Howard The Duck | "Comedy" | 1986 | $16,295,774 |
| American Graffiti | Comedy, Drama | 1973 | $115,000,000 |
Handler
Specify drag handler wherever within the table
| Movie Title dragme | Genre | Year | Gross |
|---|---|---|---|
| Star Wars | Adventure, Sci-fi | 1977 | $460,935,665 |
| Howard The Duck | "Comedy" | 1986 | $16,295,774 |
| American Graffiti | Comedy, Drama | 1973 | $115,000,000 |
Only Body
Setting onlyBody to true in row mode, user can only lift rows in tBody
| Movie Title | Genre | Year | Gross |
|---|---|---|---|
| Star Wars | Adventure, Sci-fi | 1977 | $460,935,665 |
| Howard The Duck | "Comedy" | 1986 | $16,295,774 |
| American Graffiti | Comedy, Drama | 1973 | $115,000,000 |
Sort Rows
Sort rows, handler was the first column
| Movie Title | Genre | Year | Gross |
|---|---|---|---|
| Star Wars | Adventure, Sci-fi | 1977 | $460,935,665 |
| Howard The Duck | "Comedy" | 1986 | $16,295,774 |
| American Graffiti | Comedy, Drama | 1973 | $115,000,000 |
Free
After mousedown, move mouse horizontally or vertically, see what happens. Don't forget to specify drag handler
| Movie Title | Genre | Year | Gross |
|---|---|---|---|
| Star Wars | Adventure, Sci-fi | 1977 | $460,935,665 |
| Howard The Duck | "Comedy" | 1986 | $16,295,774 |
| American Graffiti | Comedy, Drama | 1973 | $115,000,000 |
<!-- plugin css file -->
<link rel="stylesheet" href="assets/bundles/tabledragger.min.css">
<!-- Plugin Js -->
<script src="assets/bundles/tabledragger.bundle.js"></script>
<!-- Jquery Page Js -->
<script>
// Default
tableDragger(document.querySelector("#default-table"));
// Handler
tableDragger(document.querySelector("#handle-table"), { dragHandler: ".handle" });
// Sort Rows
tableDragger(document.querySelector("#row-table"), { mode: "row" });
// Free
tableDragger(document.querySelector("#free-table"), { mode: "row", onlyBody: true, dragHandler: ".handle" });
// Only Body
tableDragger(document.querySelector("#only-bodytable"), { mode: "row", onlyBody: true });
</script>