jquery - Jquery UI テーブル - HTML テーブル td セルを並べ替える方法

Question

Jquery ui - テーブル:
次のようなテーブルがあります:

<table>
  <tr>
      <td> 1 </td> 
      <td> 2 </td>
      <td> 3 </td>
  </tr>
 <tr>
      <td> 4 </td>
      <td> 5 </td>
      <td> 6 </td>
 </tr>

要素「1」を「5」に移動したい場合、その要素「1」をドラッグして要素「5」にドロップすると、場所を交換する必要があるように並べ替えたい、次に、テーブルは次のようになります。

   <table>
<tr>
  <td> 5 </td> 
  <td> 2 </td>
  <td> 3 </td>
</tr>
<tr>
  <td> 4 </td>
  <td> 1 </td>
  <td> 6 </td>
</tr>
 </table>

また、処理を行う各td内に id : imageid を持つ、image.jpg のようなハンドラー イメージがあります。何度も試しましたが、うまくいきませんでした

私が試してみました：

$("table").sortable({contentWith : 'table',handle : 'imageid' })  
$("table td").sortable({handle : 'imageid' })  
$("table tr").sortable({,handle : 'imageid' })  
$("table tbody").sortable({,handle : 'imageid' })  //for this,i added tbody in table ,but didnt work . 

まったく動かなかったと言っているわけではありません。動いていますが、正しくはありません。

すばやく編集できるように、ここに投稿された小さなコード: http://jsfiddle.net/Vq8CK/3/