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>