使表列在引导程序中可拖动（排序）

Question

我在引导程序和列名称列表中设计了一个表。当我拖动列表或表格列中的任何列名称时，它会同时拖动它们（表格列和列表列表）

检查此链接表格列是否可拖动。当你拖动表格栏时，它会运行。

转到鼠标表列的名称并拖动。

$(document).ready(function() { 

    $('.table').dragtable(); 
    $('.list').dragtable(); 
}); 


(function($) { 
    $.widget("akottr.dragtable", { 
    options: { 
     revert: false, // smooth revert 
     dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle 
     maxMovingRows: 40, // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport 
     excludeFooter: false, // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */ 
     onlyHeaderThreshold: 100, // TODO: not implemented yet, switch automatically between entire col moving/only header moving 
     dragaccept: null, // draggable cols -> default all 
     persistState: null, // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable) 
     restoreState: null, // JSON-Object or function: some kind of experimental aka Quick-Hack TODO: do it better 
     exact: true, // removes pixels, so that the overlay table width fits exactly the original table width 
     clickDelay: 10, // ms to wait before rendering sortable list and delegating click event 
     containment: null, // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null) 
     cursor: 'move', // @see http://api.jqueryui.com/sortable/#option-cursor 
     cursorAt: false, // @see http://api.jqueryui.com/sortable/#option-cursorAt 
     distance: 0, // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0" 
     tolerance: 'pointer', // @see http://api.jqueryui.com/sortable/#option-tolerance 
     axis: 'x', // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting 
     beforeStart: $.noop, // returning FALSE will stop the execution chain. 
     beforeMoving: $.noop, 
     beforeReorganize: $.noop, 
     beforeStop: $.noop 
    }, 
    originalTable: { 
     el: null, 
     selectedHandle: null, 
     sortOrder: null, 
     startIndex: 0, 
     endIndex: 0 
    }, 
    sortableTable: { 
     el: $(), 
     selectedHandle: $(), 
     movingRow: $() 
    }, 
    persistState: function() { 
     var _this = this; 
     this.originalTable.el.find('th').each(function(i) { 
     if (this.id !== '') { 
      _this.originalTable.sortOrder[this.id] = i; 
     } 
     }); 
     $.ajax({ 
     url: this.options.persistState, 
     data: this.originalTable.sortOrder 
     }); 
    }, 
    /* 
    * persistObj looks like 
    * {'id1':'2','id3':'3','id2':'1'} 
    * table looks like 
    * | id2 | id1 | id3 | 
    */ 
    _restoreState: function(persistObj) { 
     for (var n in persistObj) { 
     this.originalTable.startIndex = $('#' + n).closest('th').prevAll().size() + 1; 
     this.originalTable.endIndex = parseInt(persistObj[n] + 1, 10); 
     this._bubbleCols(); 
     } 
    }, 
    // bubble the moved col left or right 
    _bubbleCols: function() { 
     var i, j, col1, col2; 
     var from = this.originalTable.startIndex; 
     var to = this.originalTable.endIndex; 
     /* Find children thead and tbody. 
     * Only to process the immediate tr-children. Bugfix for inner tables 
     */ 
     var thtb = this.originalTable.el.children(); 
     if (this.options.excludeFooter) { 
     thtb = thtb.not('tfoot'); 
     } 
     if (from < to) { 
     for (i = from; i < to; i++) { 
      col1 = thtb.find('> tr > td:nth-child(' + i + ')') 
      .add(thtb.find('> tr > th:nth-child(' + i + ')')); 
      col2 = thtb.find('> tr > td:nth-child(' + (i + 1) + ')') 
      .add(thtb.find('> tr > th:nth-child(' + (i + 1) + ')')); 
      for (j = 0; j < col1.length; j++) { 
      swapNodes(col1[j], col2[j]); 
      } 
     } 
     } else { 
     for (i = from; i > to; i--) { 
      col1 = thtb.find('> tr > td:nth-child(' + i + ')') 
      .add(thtb.find('> tr > th:nth-child(' + i + ')')); 
      col2 = thtb.find('> tr > td:nth-child(' + (i - 1) + ')') 
      .add(thtb.find('> tr > th:nth-child(' + (i - 1) + ')')); 
      for (j = 0; j < col1.length; j++) { 
      swapNodes(col1[j], col2[j]); 
      } 
     } 
     } 
    }, 
    _rearrangeTableBackroundProcessing: function() { 
     var _this = this; 
     return function() { 
     _this._bubbleCols(); 
     _this.options.beforeStop(this.originalTable); 
     _this.sortableTable.el.remove(); 
     restoreTextSelection(); 
     // persist state if necessary 
     if (_this.options.persistState !== null) { 
      $.isFunction(_this.options.persistState) ? _this.options.persistState(_this.originalTable) : _this.persistState(); 
     } 
     }; 
    }, 
    _rearrangeTable: function() { 
     var _this = this; 
     return function() { 
     // remove handler-class -> handler is now finished 
     _this.originalTable.selectedHandle.removeClass('dragtable-handle-selected'); 
     // add disabled class -> reorgorganisation starts soon 
     _this.sortableTable.el.sortable("disable"); 
     _this.sortableTable.el.addClass('dragtable-disabled'); 
     _this.options.beforeReorganize(_this.originalTable, _this.sortableTable); 
     // do reorganisation asynchronous 
     // for chrome a little bit more than 1 ms because we want to force a rerender 
     _this.originalTable.endIndex = _this.sortableTable.movingRow.prevAll().size() + 1; 
     setTimeout(_this._rearrangeTableBackroundProcessing(), 50); 
     }; 
    }, 
    /* 
    * Disrupts the table. The original table stays the same. 
    * But on a layer above the original table we are constructing a list (ul > li) 
    * each li with a separate table representig a single col of the original table. 
    */ 
    _generateSortable: function(e) { 
     !e.cancelBubble && (e.cancelBubble = true); 
     var _this = this; 
     // table attributes 
     var attrs = this.originalTable.el[0].attributes; 
     var attrsString = ''; 
     for (var i = 0; i < attrs.length; i++) { 
     if (attrs[i].nodeValue && attrs[i].nodeName != 'id' && attrs[i].nodeName != 'width') { 
      attrsString += attrs[i].nodeName + '="' + attrs[i].nodeValue + '" '; 
     } 
     } 

     // row attributes 
     var rowAttrsArr = []; 
     //compute height, special handling for ie needed :-(
     var heightArr = []; 
     this.originalTable.el.find('tr').slice(0, this.options.maxMovingRows).each(function(i, v) { 
     // row attributes 
     var attrs = this.attributes; 
     var attrsString = ""; 
     for (var j = 0; j < attrs.length; j++) { 
      if (attrs[j].nodeValue && attrs[j].nodeName != 'id') { 
      attrsString += " " + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"'; 
      } 
     } 
     rowAttrsArr.push(attrsString); 
     heightArr.push($(this).height()); 
     }); 

     // compute width, no special handling for ie needed :-) 
     var widthArr = []; 
     // compute total width, needed for not wrapping around after the screen ends (floating) 
     var totalWidth = 0; 
     /* Find children thead and tbody. 
     * Only to process the immediate tr-children. Bugfix for inner tables 
     */ 
     var thtb = _this.originalTable.el.children(); 
     if (this.options.excludeFooter) { 
     thtb = thtb.not('tfoot'); 
     } 
     thtb.find('> tr > th').each(function(i, v) { 
     var w = $(this).outerWidth(); 
     widthArr.push(w); 
     totalWidth += w; 
     }); 
     if (_this.options.exact) { 
     var difference = totalWidth - _this.originalTable.el.outerWidth(); 
     widthArr[0] -= difference; 
     } 
     // one extra px on right and left side 
     totalWidth += 2 

     var sortableHtml = '<ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;">'; 
     // assemble the needed html 
     thtb.find('> tr > th').each(function(i, v) { 
     sortableHtml += '<li>'; 
     sortableHtml += '<table ' + attrsString + '>'; 
     var row = thtb.find('> tr > th:nth-child(' + (i + 1) + ')'); 
     if (_this.options.maxMovingRows > 1) { 
      row = row.add(thtb.find('> tr > td:nth-child(' + (i + 1) + ')').slice(0, _this.options.maxMovingRows - 1)); 
     } 
     row.each(function(j) { 
      // TODO: May cause duplicate style-Attribute 
      var row_content = $(this).clone().wrap('<div></div>').parent().html(); 
      if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "<thead>"; 
      sortableHtml += '<tr ' + rowAttrsArr[j] + '" style="height:' + heightArr[j] + 'px;">'; 
      sortableHtml += row_content; 
      if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "</thead>"; 
      sortableHtml += '</tr>'; 
     }); 
     sortableHtml += '</table>'; 
     sortableHtml += '</li>'; 
     }); 
     sortableHtml += '</ul>'; 
     this.sortableTable.el = this.originalTable.el.before(sortableHtml).prev(); 
     // set width if necessary 
     this.sortableTable.el.find('> li > table').each(function(i, v) { 
     $(this).css('width', widthArr[i] + 'px'); 
     }); 

     // assign this.sortableTable.selectedHandle 
     this.sortableTable.selectedHandle = this.sortableTable.el.find('th .dragtable-handle-selected'); 

     var items = !this.options.dragaccept ? 'li' : 'li:has(' + this.options.dragaccept + ')'; 
     this.sortableTable.el.sortable({ 
     items: items, 
     stop: this._rearrangeTable(), 
     // pass thru options for sortable widget 
     revert: this.options.revert, 
     tolerance: this.options.tolerance, 
     containment: this.options.containment, 
     cursor: this.options.cursor, 
     cursorAt: this.options.cursorAt, 
     distance: this.options.distance, 
     axis: this.options.axis 
     }); 

     // assign start index 
     this.originalTable.startIndex = $(e.target).closest('th').prevAll().size() + 1; 

     this.options.beforeMoving(this.originalTable, this.sortableTable); 
     // Start moving by delegating the original event to the new sortable table 
     this.sortableTable.movingRow = this.sortableTable.el.find('> li:nth-child(' + this.originalTable.startIndex + ')'); 

     // prevent the user from drag selecting "highlighting" surrounding page elements 
     disableTextSelection(); 
     // clone the initial event and trigger the sort with it 
     this.sortableTable.movingRow.trigger($.extend($.Event(e.type), { 
     which: 1, 
     clientX: e.clientX, 
     clientY: e.clientY, 
     pageX: e.pageX, 
     pageY: e.pageY, 
     screenX: e.screenX, 
     screenY: e.screenY 
     })); 

     // Some inner divs to deliver the posibillity to style the placeholder more sophisticated 
     var placeholder = this.sortableTable.el.find('.ui-sortable-placeholder'); 
     if (!placeholder.height() <= 0) { 
     placeholder.css('height', this.sortableTable.el.find('.ui-sortable-helper').height()); 
     } 

     placeholder.html('<div class="outer" style="height:100%;"><div class="inner" style="height:100%;"></div></div>'); 
    }, 
    bindTo: {}, 
    _create: function() { 
     this.originalTable = { 
     el: this.element, 
     selectedHandle: $(), 
     sortOrder: {}, 
     startIndex: 0, 
     endIndex: 0 
     }; 
     // bind draggable to 'th' by default 
     this.bindTo = this.originalTable.el.find('th'); 
     // filter only the cols that are accepted 
     if (this.options.dragaccept) { 
     this.bindTo = this.bindTo.filter(this.options.dragaccept); 
     } 
     // bind draggable to handle if exists 
     if (this.bindTo.find(this.options.dragHandle).size() > 0) { 
     this.bindTo = this.bindTo.find(this.options.dragHandle); 
     } 
     // restore state if necessary 
     if (this.options.restoreState !== null) { 
     $.isFunction(this.options.restoreState) ? this.options.restoreState(this.originalTable) : this._restoreState(this.options.restoreState); 
     } 
     var _this = this; 
     this.bindTo.mousedown(function(evt) { 
     if (_this.options.beforeStart(this.originalTable) === false) { 
      return; 
     } 
     clearTimeout(this.downTimer); 
     this.downTimer = setTimeout(function() { 
      _this.originalTable.selectedHandle = $(this); 
      _this.originalTable.selectedHandle.addClass('dragtable-handle-selected'); 
      _this._generateSortable(evt); 
     }, _this.options.clickDelay); 
     }).mouseup(function(evt) { 
     clearTimeout(this.downTimer); 
     }); 
    }, 
    redraw: function() { 
     this.destroy(); 
     this._create(); 
    }, 
    destroy: function() { 
     this.bindTo.unbind('mousedown'); 
     $.Widget.prototype.destroy.apply(this, arguments); // default destroy 
     // now do other stuff particular to this widget 
    } 
    }); 

    /** closure-scoped "private" functions **/ 

    var body_onselectstart_save = $(document.body).attr('onselectstart'), 
    body_unselectable_save = $(document.body).attr('unselectable'); 

    // css properties to disable user-select on the body tag by appending a <style> tag to the <head> 
    // remove any current document selections 

    function disableTextSelection() { 
    // jQuery doesn't support the element.text attribute in MSIE 8 
    // http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie 
    var $style = $('<style id="__dragtable_disable_text_selection__" type="text/css">body { -ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none; }</style>'); 
    $(document.head).append($style); 
    $(document.body).attr('onselectstart', 'return false;').attr('unselectable', 'on'); 
    if (window.getSelection) { 
     window.getSelection().removeAllRanges(); 
    } else { 
     document.selection.empty(); // MSIE http://msdn.microsoft.com/en-us/library/ms535869%28v=VS.85%29.aspx 
    } 
    } 

    // remove the <style> tag, and restore the original <body> onselectstart attribute 

    function restoreTextSelection() { 
    $('#__dragtable_disable_text_selection__').remove(); 
    if (body_onselectstart_save) { 
     $(document.body).attr('onselectstart', body_onselectstart_save); 
    } else { 
     $(document.body).removeAttr('onselectstart'); 
    } 
    if (body_unselectable_save) { 
     $(document.body).attr('unselectable', body_unselectable_save); 
    } else { 
     $(document.body).removeAttr('unselectable'); 
    } 
    } 

    function swapNodes(a, b) { 
    var aparent = a.parentNode; 
    var asibling = a.nextSibling === b ? a : a.nextSibling; 
    b.parentNode.insertBefore(a, b); 
    aparent.insertBefore(b, asibling); 
    } 
})(jQuery);

.dragtable-sortable { 

     list-style-type: none; 

     margin: 0; 

     padding: 0; 

     -moz-user-select: none; 

    } 

    .dragtable-sortable li { 

     margin: 0; 

     padding: 0; 

     float: left; 

     font-size: 1em; 

     background: white; 

    } 

    .dragtable-sortable th, 

    .dragtable-sortable td { 

     border-left: 0px; 

    } 

    .dragtable-sortable li:first-child th, 

    .dragtable-sortable li:first-child td { 

     border-left: 1px solid #CCC; 

    } 

    .ui-sortable-helper { 

     opacity: 0.7; 

     filter: alpha(opacity=70); 

    } 

    .ui-sortable-placeholder { 

     -moz-box-shadow: 4px 5px 4px #C6C6C6 inset; 

     -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset; 

     box-shadow: 4px 5px 4px #C6C6C6 inset; 

     border-bottom: 1px solid #CCCCCC; 

     border-top: 1px solid #CCCCCC; 

     visibility: visible !important; 

     background: #EFEFEF !important; 

     visibility: visible !important; 

    } 

    .ui-sortable-placeholder * { 

     opacity: 0.0; 

     visibility: hidden; 

    }

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css" /> 
    <link rel="stylesheet" type="text/css" href="dragtable.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script src="https://github.com/akottr/dragtable/blob/master/jquery.dragtable.js"></script> 
    <title>jquery.dragtable.js</title> 
</head> 

<body> 
    <ul class="list"> 

    <li>FUNCTIONAL GROUP</li> 
    <li>CALLS IN QUEUE</li> 
    <li>LONG CALL WAITING</li> 
    <li>SERVICE LEVEL</li> 
    <li>AGENTS STAFFED</li> 
    <li>Forecasted staff</li> 
    <li>Longest Agent Available</li> 
    <li>AGENTS AVAL</li> 
    <li>AGENTS ON CALL</li> 
    <li>Cumulative CALLS OFFERED</li> 
    <li>Cumulative CALLS HANDLED</li> 
    <li>Cumulative SERVICE LEVEL</li> 
    <li>Cumulative CALLS ABND %</li> 

    </ul> 
    <table class="table dataTable tree" id="table-first" data-role="table" data-mode="columntoggle"> 
    <colgroup> 
     <col id="col0"> 
     <col id="col1"> 
      <col id="col2"> 
      <col id="col3"> 
       <col id="col4"> 
       <col id="col5"> 
        <col id="col6"> 
        <col id="col7"> 
         <col id="col8"> 
         <col id="col9"> 
          <col id="col10"> 
          <col id="col11"> 
           <col id="col12"> 
           <col id="col13"> 
            <col id="col14"> 
    </colgroup> 
    <thead> 
     <tr> 
     <th width="18%">FUNCTIONAL GROUP</th> 
     <th width="5%">CALLS IN QUEUE</th> 
     <th width="7%">LONG CALL WAITING</th> 
     <th width="6%">SERVICE LEVEL</th> 
     <th width="6%">AGENTS STAFFED</th> 
     <th width="7%">Forecasted staff</th> 
     <th width="8%">Longest Agent Available</th> 
     <th width="5%">AGENTS AVAL</th> 
     <th width="6%">AGENTS ON CALL</th> 
     <th width="8%">Cumulative CALLS OFFERED</th> 
     <th width="8%">Cumulative CALLS HANDLED</th> 
     <th width="8%">Cumulative SERVICE LEVEL</th> 
     <th width="8%">Cumulative CALLS ABND %</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!--START BILLING TABLE SECTION--> 
     <tr class="treegrid-1 drill-parent"> 
     <td>BILLING</td> 
     <td>7</td> 
     <td>:57:12</td> 
     <td>&nbsp;</td> 
     <td>100</td> 
     <td>120</td> 
     <td>0:00:27</td> 
     <td>50</td> 
     <td>50</td> 
     <td>984</td> 
     <td>835</td> 
     <td>86.79%</td> 
     <td>15.14%</td> 
     </tr> 
     <tr class="treegrid-2 treegrid-parent-1"> 
     <td>BILLING-COX</td> 
     <td>2</td> 
     <td>:50:10</td> 
     <td>80.50%</td> 
     <td>50</td> 
     <td>55</td> 
     <td>0:00:27</td> 
     <td>20</td> 
     <td>20</td> 
     <td>60</td> 
     <td>230</td> 
     <td>79.23%</td> 
     <td>2.80%</td> 
     </tr> 
     <tr class="treegrid-3 treegrid-parent-2"> 
     <td>Payment</td> 
     <td>2</td> 
     <td>:50</td> 
     <td>90.00%</td> 
     <td>10</td> 
     <td>12</td> 
     <td>0:00:27</td> 
     <td>6</td> 
     <td>6</td> 
     <td>60</td> 
     <td>230</td> 
     <td>54</td> 
     <td>1.00%</td> 
     </tr> 

     <tr class="treegrid-66 treegrid-parent-62"> 
     <td>COLLECTIONS-SITEL</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <tr class="treegrid-67 treegrid-parent-66"> 
     <td>SAINT CATH</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <tr class="treegrid-68 treegrid-parent-67"> 
     <td>COLLECTIONS OPERATION</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <tr class="treegrid-69 treegrid-parent-67"> 
     <td>COLLECTIONS</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <tr class="treegrid-70 treegrid-parent-67"> 
     <td>TELEPHONE</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <tr class="treegrid-71 treegrid-parent-66"> 
     <td>PANAMA</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <tr class="treegrid-72 treegrid-parent-71"> 
     <td>COLLECTIONS</td> 
     <td>3</td> 
     <td>20</td> 
     <td>60</td> 
     <td>14</td> 
     <td>7</td> 
     <td>0:00:27</td> 
     <td>12</td> 
     <td>12</td> 
     <td>45</td> 
     <td>200</td> 
     <td>89.00%</td> 
     <td>2</td> 
     </tr> 
     <!--END COLLECTIONS TABLE SECTION--> 

    </tbody> 
    </table> 
</body> 

</html>

Answer 1

<div class="table-responsive container"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr class="dnd-moved"> 
       <th>Column #1</th> 
       <th>Column #2</th> 
       <th>Column #3</th> 
       <th>Column #4</th> 
       <th>Column #5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="dnd-moved"> 
       <td>Row #1-1</td> 
       <td>Row #1-2</td> 
       <td>Row #1-3</td> 
       <td>Row #1-4</td> 
       <td>Row #1-5</td> 
      </tr> 
      <tr class="dnd-moved"> 
       <td>Row #2-1</td> 
       <td>Row #2-2</td> 
       <td>Row #2-3</td> 
       <td>Row #2-4</td> 
       <td>Row #2-5</td> 
      </tr> 
      <tr class="dnd-moved"> 
       <td>Row #3-1</td> 
       <td>Row #3-2</td> 
       <td>Row #3-3</td> 
       <td>Row #3-4</td> 
       <td>Row #3-5</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<script src="js/dragndrop.table.columns.js" type="text/javascript"></script> 
<script> 
    $('.table').dragableColumns(); 
</script> 

演示页http://alexshnur.github.io/drag-n-drop-table-columns/