table-dragger

Easily add drag-and-drop sorting to your table without jQuery View on GitHub

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
American Graffiti Comedy, Drama 1973 $115,000,000
Howard The Duck "Comedy" 1986 $321,391,432
300 100 200 50
          
tableDragger(document.querySelector("#row-table"), { mode: "row", onlyBody: true, dragHandler: ".handle" });
        
        

Sort Rows Sort rows, handler was the first column

Movie Title Genre Year Gross
Star Wars Adventure, Sci-fi 1977 $460,935,665
American Graffiti Comedy, Drama 1973 $115,000,000
Howard The Duck "Comedy" 1986 $321,391,432
300 100 200 50
          
tableDragger(document.querySelector("#row-table"), { mode: "row" });
        
        

Sort Columns With no options, sort columns, handler was the first row

Movie Title Genre Year Gross
Star Wars Adventure, Sci-fi 1977 $460,935,665
American Graffiti Comedy, Drama 1973 $115,000,000
Howard The Duck "Comedy" 1986 $321,391,432
300 100 200 50
          
tableDragger(document.querySelector("#default-table"));
        
        

Handler Specify drag handler wherever within the table

Movie Title Genre Year Gross
Star Wars Adventure, Sci-fi 1977 $460,935,665
American Graffiti Comedy, Drama 1973 $115,000,000
Howard The Duck "Comedy" 1986 $321,391,432
300 100 200 50
          
tableDragger(document.querySelector("#row-table"), { dragHandler: ".handle" });
        
        

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
American Graffiti Comedy, Drama 1973 $115,000,000
Howard The Duck "Comedy" 1986 $321,391,432
300 100 200 50
          
tableDragger(document.querySelector("#row-table"), { mode: "row", onlyBody: true });
        
        

Event Add callback when event trigger, open devtool see what happens

Movie Title Genre Year Gross
Star Wars Adventure, Sci-fi 1977 $460,935,665
American Graffiti Comedy, Drama 1973 $115,000,000
Howard The Duck "Comedy" 1986 $321,391,432
300 100 200 50
          
tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
  .on('drag', () => {
    console.log('drag');
  })
  .on('drop', (from, to, el, mode) => {
    console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
  })
  .on('shadowMove', (from, to, el, mode) => {
    console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
  })
  .on('out', (el, mode) => {
    console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
  });