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 TitleGenreYearGross
Star WarsAdventure, Sci-fi1977$460,935,665
American GraffitiComedy, Drama1973$115,000,000
Howard The Duck"Comedy"1986$321,391,432
30010020050
          
tableDragger(document.querySelector("#row-table"), { mode: "row", onlyBody: true, dragHandler: ".handle" });
        
        

Sort Rows Sort rows, handler was the first column

Movie TitleGenreYearGross
Star WarsAdventure, Sci-fi1977$460,935,665
American GraffitiComedy, Drama1973$115,000,000
Howard The Duck"Comedy"1986$321,391,432
30010020050
          
tableDragger(document.querySelector("#row-table"), { mode: "row" });
        
        

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

Movie TitleGenreYearGross
Star WarsAdventure, Sci-fi1977$460,935,665
American GraffitiComedy, Drama1973$115,000,000
Howard The Duck"Comedy"1986$321,391,432
30010020050
          
tableDragger(document.querySelector("#default-table"));
        
        

Handler Specify drag handler wherever within the table

Movie TitleGenreYearGross
Star WarsAdventure, Sci-fi1977$460,935,665
American GraffitiComedy, Drama1973$115,000,000
Howard The Duck"Comedy"1986$321,391,432
30010020050
          
tableDragger(document.querySelector("#row-table"), { dragHandler: ".handle" });
        
        

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

Movie TitleGenreYearGross
Star WarsAdventure, Sci-fi1977$460,935,665
American GraffitiComedy, Drama1973$115,000,000
Howard The Duck"Comedy"1986$321,391,432
30010020050
          
tableDragger(document.querySelector("#row-table"), { mode: "row", onlyBody: true });
        
        

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

Movie TitleGenreYearGross
Star WarsAdventure, Sci-fi1977$460,935,665
American GraffitiComedy, Drama1973$115,000,000
Howard The Duck"Comedy"1986$321,391,432
30010020050
          
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}`);
  });