jQuery Sortable move next tr to its new postion
<p>Im stuck with this. How can I move the next tr element to the position of the tr that I will sort/drag moved. below here is the html and js code</p>

<pre><code>        &lt;table id="to_sort"&gt;
          &lt;thead&gt;&lt;/thead&gt;
          &lt;tbody class="ui-sortable"&gt;
           &lt;tr class="to_be_sort"&gt;1&lt;/tr&gt;
           &lt;tr class="hidden_tr"&gt;1_child&lt;/tr&gt;
           &lt;tr class="to_be_sort"&gt;2&lt;/tr&gt;
           &lt;tr class="hidden_tr"&gt;2_child&lt;/tr&gt;
           &lt;tr class="to_be_sort"&gt;3&lt;/tr&gt;
           &lt;tr class="hidden_tr"&gt;3_child&lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;

        function placeholder_helper(e,ui){
            $('.ui-state-highlight').html('&lt;td colspan="4"&gt;&amp;nbsp;&lt;/td&gt;');
        }
        jQuery(function($) {
           $( "#to_sort tbody" ).sortable({
              opacity: 0.6,
              cursor: 'move',
          enter code hereitems: 'tr.to_be_sort',
          handle:'td.to_be_sort',
          placeholder:'ui-state-highlight',
          over:function(e,ui){
             placeholder_helper(e,ui);
          },
          start: function(event, ui) {
          },
          update: function(event, ui) {
          }
           });
         });
</code></pre>
