jQuery UIをソート可能にしてソート可能にするには、ドラッグアイコンをテーブルに追加するにはどうすればよいですか？

Question

私はテーブルの行を並べ替えることができるように私は以下を使用します。

$('#grid tbody').sortable({  
     helper: function (e, ui) { 
      ui.children().each(function() { 
       $(this).width($(this).width()); 
      }); 
      return ui; 
     }, 
     scroll: true, 
     stop: function (event, ui) { 
      //     
     } 
    }).disableSelection(); 

しかし、問題は今ではテーブルを変更できません。ここに例があります。

これは単なる例であることに注意してください。私の実際のテーブルには入力フィールドがあり、ユーザーは入力データを入力できます。これは私がdisableSelectionを使うだけではいけない理由です。

<table id="grid" > 
    <tbody> 
     <tr><td>A</td><td>1</td></tr> 
     <tr><td>B</td><td>2</td></tr> 
     <tr><td>C</td><td>3</td></tr> 
     <tr><td>D</td><td>4</td></tr> 
     <tr><td>E</td><td>5</td></tr> 
    </tbody> 
</table> 

どのようにすれば上向き/下向きの矢印が表示されるので、並べ替えのドラッグハンドルとして使用できますか？うまくいけばjQueryのUIアイコンを使用しています。

Answer 1

は、あなたがui.cssインポートするこの

$('#grid tbody').sortable({  
     helper: function (e, ui) { 
      ui.children().each(function() { 
       $(this).width($(this).width()); 
      }); 
      return ui; 
     }, 
     scroll: true, 
     handle : '.handle', 
     stop: function (event, ui) { 
      //     
     } 
    }).disableSelection();