drag drop sloupce tabulky

jqueryui a dragtable plugin

by Petr Haluza

HTML

<table id="demo" class="sar-table">
  <thead>
    <tr>
      <th><div class="soupatko"></div>Cislo</th>
      <th><div class="soupatko"></div>Jmeno</th>
      <th><div class="soupatko"></div>barva</th>  
    </tr>
  </thead>
  <tbody><tr>  <td>001</td>  <td>Jarda</td>  <td>Modra</td>  </tr>
         <tr>  <td>002</td>  <td>Ferda</td>  <td>Zelena</td>	</tr>
         <tr>  <td>003</td>  <td>Carda</td>  <td>Zluta</td> 	</tr>  
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Draggable-Table-Columns-Dragtable/jquery.dragtable.js"></script>

CSS

.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 li:first-child th, 
.dragtable-sortable li:first-child td {    border-left: 1px solid #CCC; }
.dragtable-sortable th, 
.dragtable-sortable td{    border-left: 0px;}
.ui-sortable-helper {    opacity: 0.7;filter: alpha(opacity=70);}
.ui-sortable-placeholder {   -moz-box-shadow: 0px 0px 4px gray inset;
    -webkit-box-shadow: 0px 0px 4px #C6C6C6 inset;
    box-shadow: 0px 0px 4px #C6C6C6 inset; 
    background: #EFEFEF !important; 
    visibility: visible !important;
}
.ui-sortable-placeholder * { opacity: 0.0; visibility: hidden; }
#demo {border-collapse:collapse;border-spacing: 0;border:0;}
#demo tr {margin:0; padding:0;}
table td, table th {border:1px solid #CCC; font-size:0.9em; padding:5px; text-align:left; vertical-align:top;}
table.sar-table th { background: #FBF9EA; height:20px;  width:100px;}

.soupatko {
    background-image:url("http://akottr.github.io/css/../img/handle.png");
    background-repeat:repeat-x;
    height:18px;
    margin:0 1px;
    cursor:move;
}

JavaScript

$(document).ready(function() {
          
    $('#demo').dragtable({
    		dragHandle:'.soupatko', // ya co se bude chztat
        maxMovingRows:1, //tu se voli, zda se má taha celý sloupec nebo jen header
        //toto by mělo uložit stav a načíst, nevim jestli funguje
        persistState: function(table) {
          if (!window.sessionStorage) return;
          var ss = window.sessionStorage;
          table.el.find('th').each(function(i) {
            if(this.id != '') {table.sortOrder[this.id]=i;}
          });
          ss.setItem('tableorder',JSON.stringify(table.sortOrder));
        },
        restoreState: eval('(' + window.sessionStorage.getItem('tableorder') + ')')
    });    
    
  });