Table Dragger

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

Handler

Specify drag handler wherever within the table

Only Body

Setting onlyBody to true in row mode, user can only lift rows in tBody

Sort Rows

Sort rows, handler was the first column

Free

After mousedown, move mouse horizontally or vertically, see what happens. Don't forget to specify drag handler

<!-- 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>