title: How to interchange the table cells using jquery ui using drag and drop
body: <p>I want to interchange the columns for the table on drag and drop. </p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
    &lt;td class='1'&gt;
     First
    &lt;/td&gt;
    &lt;td class='2'&gt;
     Second
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td class='3'&gt;
     Third
    &lt;/td&gt;
    &lt;td class='4'&gt;
     Fourth
    &lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now i can use the <code>draggable</code> function</p>
  
  <pre><code> $(".1").draggable();
  </code></pre>
  
  <p>If i drag the <code>class='1'</code> <code>td</code> to <code>class='4'</code> <code>td</code> then 
  both <code>td's</code> will interchange. How can i able to 
  do this with <code>jqueryui</code></p>