@extends('layout.master') @section('title', 'Table Dragger') @section('parentPageTitle', 'Table') @section('content')

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
@stop @section('page-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 }); @stop