<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <div class="container"> <div class="row"> <div class="table-responsive col-md-12"> <table id="sort2" class="grid table table-bordered table-sortable"> <thead> <tr><th></th><th></th></tr> </thead> <tbody> <tr> <td data-id="11"><input type="checkbox" id="html"></td> <td></td> <td><button class="btn btn-primary glyphicon glyphicon-remove"></button></td> </tr> <tr> <td data-id="22"><input type="checkbox" id="html"></td> <td></td> <td><button class="btn btn-primary glyphicon glyphicon-remove"></button></td> </tr> <tr> <td data-id="33"><input type="checkbox" id="html"></td> <td></td> <td><button class="btn btn-primary glyphicon glyphicon-remove"></button></td> </tr> </tbody> </table> </div> </div> </div>

.table-sortable tbody tr { cursor: move; }

$(document).ready(function() { var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; var updatee = function() { $('tbody').find('tr').each(function(k,v) { console.log($(v)[0].children[0].dataset.id) }); }; $(".table-sortable tbody").sortable({ helper: fixHelperModified, update: updatee }).disableSelection(); $(".table-sortable thead").disableSelection(); });