<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> <!------ Include the above in your HEAD tag ----------> <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>Year</th><th>Title</th><th>Grade</th></tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text" value="name 1" class="form-control"></td> <td><input type="text" value="email 1" class="form-control"></td> <td><button class="btn btn-primary glyphicon glyphicon-remove"></button></td> </tr> <tr> <td>2</td> <td><input type="text" value="name 2" class="form-control"></td> <td><input type="text" value="email 2" class="form-control"></td> <td><button class="btn btn-primary glyphicon glyphicon-remove"></button></td> </tr> <tr> <td>3</td> <td><input type="text" value="name 3" class="form-control"></td> <td><input type="text" value="email 3" class="form-control"></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; }; $(".table-sortable tbody").sortable({ helper: fixHelperModified }).disableSelection(); $(".table-sortable thead").disableSelection(); });