Bảng có thể sắp xếp với Hàng có thể mở rộng

Question

Tôi là người mới sử dụng/rails và tôi đang gặp sự cố khi sử dụng .sortable(). Tôi có hàng có thể mở rộng và tôi dường như không thể nhận được mã đúng để có hàng ẩn, tức là hàng con, gắn liền với hàng hiển thị, tức là hàng gốc. Mã JS có liên quan:

(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); 

Hàng mẹ có lớp lẻ2 và hàng con có lớp con.

Cách thích hợp để khóa 2 hàng lại với nhau khi .sortable() được áp dụng là gì?

Tôi hiện đang sử dụng đường ray 3.1.1 với jquery-ray 1.0.19

EDIT:

Đây là html liên quan

<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: Tôi đã cập nhật ứng dụng của tôi để Rails 3.2.1 với jquery-rails 2.0.0

EDIT 3: Vì không có ai cung cấp giải pháp cho thẻ bảng thay vì div và tôi chưa tìm thấy bất kỳ thứ gì áp dụng cho bảng, tôi buộc phải thay đổi thành div.

Answer 1

Có vẻ rằng đây là những gì bạn muốn: http://jqueryui.com/demos/sortable/#portlets

Nếu không, xin vui lòng gửi HTML của bạn để nó dễ dàng hơn để xem những gì bạn đang cố gắng làm.

Cụ thể, hãy chú ý cách mục có thể sắp xếp là div và có div cho trẻ em.

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