title: jQueryUI sortable to drag & drop columns in a responsive table
body: <p>I'm trying to learn the jQueryUI sortable feature in order to make it work on a responsive table I'm using on my webpage.</p>
  
  <p>I made a <a href="https://jsfiddle.net/dLas15to/10/" rel="nofollow noreferrer">jsfiddle</a> to make some tests and I just can't figure out <strong>how to drag and drop columns</strong> (not only th's).</p>
  
  <p>I suspected I should use the "connectWith" (or "items"?) option and connect all the td's that share the same id than the dragged th but I just don't succeed in doing that. </p>
  
  <p>I'm not even sure that's what "connectWith" or "items" are made for actually but there is nothing else I can find in the documentation that seems to help me achieve a column drag &amp; drop.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;table&gt;
             &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Col 1&lt;/th&gt;
                      &lt;th&gt;Col 2&lt;/th&gt;
                      &lt;th&gt;Col 3&lt;/th&gt; 
                      &lt;th&gt;Col 4&lt;/th&gt;
                  &lt;/tr&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;data 1&lt;/td&gt;
                      &lt;td&gt;data 2&lt;/td&gt;
                      &lt;td&gt;data 3&lt;/td&gt;
                      &lt;td&gt;data 4&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;data 1&lt;/td&gt;
                      &lt;td&gt;data 2&lt;/td&gt;
                      &lt;td&gt;data 3&lt;/td&gt;
                      &lt;td&gt;data 4&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>*html, body {
      margin:0px;
      padding:0px;
      width:100%;
      height:100%;
  }
  
   body:before{
       content: "";
       display: block;
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
   }
  
  table{
      table-layout: fixed;
      margin: 0 auto;
      border-collapse: collapse;
      overflow: hidden;
      white-space: nowrap; 
      width:100%;
      color:#000;
      float:left;
  }
  
  tr{
      display:table-row;
      border: 1px solid black
  }
  
  th, td {
      border:1px solid #000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: table-cell;
      text-align:center;
  }
  
  th{
      position: relative;
      background:#bbb;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$( function() {
      $('thead tr').sortable({
          start: function(e, ui)
          {
              var ind_th= ui.item.index();
              $('tbody td:nth-child('+(ind_th+1)+')').addClass('drg').css('color','red');
          },
          connectWith:".drg",
          stop: function(e, ui)
          {
              $('tbody td').removeClass('drg')
          }
      });
  });
  </code></pre>
  
  <p>Thank you for your help.</p>