table-dragger

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

Usage cells that can be lifted up was marked with icon

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 
          
tableDragger(document.querySelector("#default-table"));

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 
          
tableDragger(document.querySelector("#row-table"), { mode: "row" });

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 
          
tableDragger(document.querySelector("#row-table"), { mode: "row", onlyBody: true });

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 
          
tableDragger(document.querySelector("#row-table"), { dragHandler: ".handle" });

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

Movie Title Genre Year Gross
Star Warsdragme Adventure, Sci-fi 1977 $460,935,665
Howard The Duck "Comedy" 1986 $16,295,774
American Graffiti Comedy, Drama 1973 $115,000,000 
          
tableDragger(document.querySelector("#row-table"), { mode: "row", onlyBody: true, dragHandler: ".handle" });

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

Movie Title Genre Year Gross
Star Wars dragme Adventure, Sci-fi 1977 $460,935,665
Howard The Duck "Comedy" 1986 $16,295,774
American Graffiti Comedy, Drama 1973 $115,000,000 
          
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}`);
  });
Fork me on GitHub