jQuery: table列序列重排, 上移下移排序, 拖拽排序, 拖拽table列

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}`);
  });