user3464091 user3464091 - 15 days ago 8
jQuery Question

How to create sortable table rows using jQuery

I'm trying to create a

.sortable
table using jQuery. The
fixWidthHelper
class preserves the table column widths. (I've removed some of the HTML)

Table HTML:

<table class = "table table-bordered" >
hr content here...
<tbody id = "field_wrapper">
<tr>
<td id = "move">...</td>
<td id = "move">...</td>
</tbody>
</table>


jQuery:

$(function (sort) {
sortable_tables.sorting_field_table();

});

var sortable_tables =
{
sorting_field_table: function(sort)
{
$('#field_wrapper').sortable({
placeholder: "drop",
helper: sortable_tables.fixWidthHelper
}).disableSelection();
}
fixWidthHelper: function(e, ui) {
ui.children().each(function(sort) {
$(this).width($(this).width());
});
return ui;
}
});


CSS:

#move{ margin-left: 0px; padding-right:10px; cursor: move;}
.drop {
outline: thin dashed #CCC !important;
background-color:#CCC;
width:100%;
}

Answer

I have got it it working!

jQuery:

$(function() {
  $( "#field_wrapper" ).sortable({
    placeholder: "drop"
  });
  $( "#field_wrapper" ).disableSelection();
});
Comments