jQuery UI sortable with selectale text

by karamarimo

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-sm-12">
  <table id="table" class="table table-bordered">
    <tbody id="sortable">
      <tr>
        <th class="rank">1</th>
        <td contenteditable>blabla</td>
      </tr>
      <tr>
        <th class="rank">2</th>
        <td contenteditable></td>
      </tr>
      <tr>
        <th class="rank">3</th>
        <td contenteditable></td>
      </tr>

    </tbody>
  </table>
</div>

JavaScript

$("#sortable").sortable({
  cancel: "td"
}).delegate('input,textarea,td', 'click', function(ev){
  ev.target.focus();
});

$('#sortable').bind('sortstop', function(e, ui) {
  var rows = $('#sortable .rank');
  for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
    $($('.rank')[i]).text(i + 1);
  }
});