Question

I’m a jquery/rails newbie and I’m having trouble using .sortable(). I have expandable rows and i can’t seem to get the right code to have the hidden row, i.e. the child row, stick with the visible, i.e. the parent row. The relevant JS code:

(function($){
    $.fn.jSortable = function(){


    var element = this;

    var fixHelper = function(e, ui) {
        ui.children().each(function(){
            $(this).width($(this).width());
        });
        return ui;
    };

    $(element).sortable({
        helper: fixHelper,
        axis: "y",
        cursor: "move",
        items: "tr.odd2",
        distance: "30"

    });
    $(element).disableSelection();
};

})(jQuery);

The parent row has the class odd2 and the child row has the class child.

What is the proper way to lock the 2 rows together when .sortable() is applied?

I am currently using rails 3.1.1 with jquery-rails 1.0.19

EDIT:

Here is the relevant html

<table id="sortableTable">
  <tr class= 'headings'>
        <th><%= sortable "number" %></th>
        <th><%= sortable "customer_id" %></th>
        <th><%= sortable "priority" %></th>
        <th><%= sortable "quantity" %></th>
        <th><%= sortable "due_date" %></th>
        <th></th>
  </tr>

<% @jobs.each do |job| %>
  <tr class= "odd2">
    <td><%= job.number %></td>
    <td><%= job.customer %></td>
    <td><%= job.priority %></td>
    <td><%= job.quantity %></td>
    <td><%= job.due_date %></td>
    <td><%= button 'Edit', edit_job_path(job) %></td>
  </tr>

  <tr class= "child">
    <td><%= job.job_items %></td>
  </tr>
 <% end %>
</table>

<%= javascript_tag do %>
$(document).ready(function(){
    $('#sortableTable tbody').jSortable();
});

<% end %>

EDIT 2: I have updated my app to Rails 3.2.1 with jquery-rails 2.0.0

EDIT 3: Since no one has provided a solution for a table tag instead of a div and i have yet to find anything that applies to a table, I’m forced to change to divs.

Answer 1

Seems that this is what you want: http://jqueryui.com/demos/sortable/#portlets

If not, please post your HTML so it is easier to see what you are trying to do.

Specifically, notice how the sortable item is a div and has divs for children.

<div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>