javascript - 2 tables columns interchange draggable and droppable -

i want interchange columns in 2 tables.if "a" selected , dragged "1" should move automatically. http://jsfiddle.net/9lgrm/

<table id="a">     <tr>                     <td>a</td>                 <td>b</td>           <td>c</td>           <td>d</td>       </tr> </table> <table id="b">     <tr>                     <td>1</td>                 <td>2</td>           <td>3</td>           <td>4</td>       </tr>      <tr>          <td>1</td>                 <td>2</td>           <td>3</td>           <td>4</td>       </tr>  </table> 

i have tried plugin.

http://www.danvk.org/wp/dragtable/

https://github.com/jebaird/dragtable

it uses single table cant change structure of table!

here solution.

the html:

    <table class="draggable" id="a"><thead><tr>  <th>a</th> <th>b</th> <th>c</th> <th>d</th>  </tr></thead> <tbody> <tr>  <td>1</td><td>2</td><td>3</td> <td>4</td>  </tr> <tr>  <td>1</td><td>2</td><td>3</td> <td>4</td>  </tr> <tr>  <td>1</td><td>2</td><td>3</td> <td>4</td>  </tr>    </tbody><tfoot></tfoot></table> 

the css:

#a {  border: 1px black; }  th{font-weight:normal;} 

hope helps.