Evan Root Evan Root - 5 months ago 12
jQuery Question

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

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

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