How to make Jquery sortable plugin use more than one row in a table for dragging

Question

I have a table that represents button. Each Button has three properties. To represent this structure i am using table where the first row is the name of the button and then the three properties of the button follows in the next three rows. Now i want to enable the user to reorder buttons. For this i am using JQUERY Sortable plugin. It makes the tbody sortable and I can drag and drop individual rows.

WHat i want is that instead of dragging and dropping individual rows the user should be able to drag four rows together in a group ( The name + properties of the button) How can this be achieved.

I have the table in the beginning like this

 <table class="table table-bordered table-striped table-highlight" id="tab_logic"> <tbody></tbody> </table> 

And I am appending the rows in this manner

 function loadTable(num) { $('#tab_logic').empty(); for (var i=1 ;i<=num;i++) { $('#tab_logic').append("<div class = 'editrow'>"); $('#tab_logic').append("<tr class='321'><td colspan='3' align='center'><p id='addrp"+i+"'><strong>Action Button "+i+" Properties</strong></p></td></tr>"); $('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addac"+i+"'><strong>Action</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpac"+i+"'>Action</p></td><td><input type ='text' class ='form-control' id='addiac"+i+"' name ='addiac"+i+"' placeholder='Enter Action'</td> </tr>"); $('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addat"+i+"'><strong>Action Text</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpat"+i+"'>Action Text</p></td><td><input type ='text' class ='form-control' id='addiat"+i+"' name ='addiat"+i+"' placeholder='Enter Action Text'</td> </tr>"); $('#tab_logic').append("<tr class='123'><td align='center' style='width:15%'><p id='addcc"+i+"'><strong>Color Code</strong></p></td><td class='text-danger' align='center' style='width:15%'><p id='addpcc"+i+"'>Color Code</p></td><td><input type ='text' class ='form-control' id='addicc"+i+"' name ='addicc"+i+"' placeholder='Enter Color Code'</td> </tr>"); $('#tab_logic').append("</div>"); } } 

I want the lines running in the loop to be sortable as one instead of individually Further using the jQuery UI sortable function like this as suggested

 $("#tab_logic").sortable({ items: "div", helper: "clone" }).disableSelection(); 

But it is not working as required. I have also tried other possible combinations for items attribute but they didn't work too.

Answer 1

Hi take a look at http://api.jqueryui.com/sortable/#option-items

You can wrap each 4 rows in tbody tag and can set sortable items to tbody.

//initialization 
$( ".table" ).sortable();
// Setter
$( ".table" ).sortable( "option", "items", ".sort-able-tbody" );

pls check this codepen. http://codepen.io/shahidbasheer/pen/WxRgOe

Update: you can not wrap table rows in div tag because its not a valid html. ref I need to wrap up table row into div