jQuery多个可排序表

Question

This question is best read with the fiddle open ;). I've got a tables inside a table. The inside grey tables need to be sorted in there own container. So the grey rows can only be moved in the grey table. But the white rows need to move there grey table with them. So you cannot move a white row or a grey table on there own, they are connected.

Here is my fiddle for what I got right now:

fiddle

options = {
helper: (event, ui) -> 
    children = ui.children()
    view = ui.clone()

    view.children().each (index) ->           
        $(@).width(children.eq(index).width())
    return view
}


$('#ccc').find('tbody').sortable(options)

I've been cracking my head on this all day but I cannot figure out how to like a grey table to a white row.

Answer 1

With your current html structure this is quite difficult to achieve.

First of all you need two sortables (one to sort big chunks with white headers and second to sort inside grey tables).

You want to be able to move big tables with small ones inside but as these were all inside sibling elements ( tr ) it was not really possible (so I've added multiple <tbody> s in there).

Anyway here's the working fiddle: https://jsfiddle.net/9vmvjqm4/5/

You still need to exclude thead from being sortable. I don't like CoffeeScript so I left that (add items : ':not(thead)' ) to options (or sth like that, there are topics how to do that on stackOverflow).

Also, have a look at this: http://johnny.github.io/jquery-sortable/