Sortable table rows using one column

Question

I'm not sure if the title describes my problem. I'm trying to make table where values can be changed inline (using contenteditable) and which is sortable.

Unfortunately, I have no idea how to combine these features together. The HTML looks like this:

<table id="sort">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Last Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td contenteditable="true">John</td>
      <td contenteditable="true">Doe</td>
      <td><img src="images/3-lines.png" /></td>
    </tr>
    <tr>
      <td>1</td>
      <td contenteditable="true">John</td>
      <td contenteditable="true">Doe</td>
      <td><img src="images/3-lines.png" /></td>
    </tr>
  </tbody>
</table>

The JS looks like this:

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;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();

I would like to keep contenteditable attribute. The user should be able to reorder rows by draging "3-lines.png" icon which is on the far right cell.

It's possible?

Answer 1

If you can add a jquery plugin, use DataTables, it does what you want, I think.

https://editor.datatables.net/examples/inline-editing/simple