jQuery UI Sortable Position using < input >

Question

This table http://jsfiddle.net/rp4fV/477/ has input element that I need to sort the rows adding number and getting result as dragging, for example if i input 2 to row 4 the row 4 getting up automatically to replace the row 2 and all rows get sorting depend on the new changes, is there any suggestion how to done that ? i know how to do that using drag but using input i have no idea how to done that.

the reason to it, that there is many rows and when drag sometimes i can't recognise the correct place.

code:

$('td, th', '#sortFixed').each(function () {
  var cell = $(this);
 cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();

Answer 1

It might be more complicated than you wanted, but I hope this helps.

https://jsfiddle.net/Twisty/9aes8omr/

JavaScript

$(function() {
  function showIndex(tb) {
    var fields = $(tb).find("input[name='order']");
    console.log(fields);
    fields.each(function(ind, el) {
      console.log(ind, el);
      $(el).val(ind + 1);
    });
  }

  function spliceRow(tb, r, i) {
    var ind = i - 1;
    var ln = $("tr", tb).length;
    var rows = [];
    $("tr", tb).each(function(ind, el) {
      rows.push(el);
    });
    rows.splice(ind, 0, r);
    tb.html("");
    $.each(rows, function(k, v) {
      tb.append(v);
    });
  }
  // Fix the width of the cells
  $('td, th', '#sortFixed').each(function() {
    var cell = $(this);
    cell.width(cell.width());
  });

  $('#sortFixed tbody').sortable({
    items: "> tr",
    update: function(e, ui) {
      console.log("Sort Update.");
      showIndex($(this));
    }
  }).disableSelection();

  $("#sortFixed tbody").on("change", "input[name='order']", function(e) {
    var me = $(this);
    var orig = me.parents("tr");
    var row = orig.clone();
    var t = parseInt(me.val());
    console.log(t, row);
    orig.remove();
    spliceRow($("#sortFixed tbody"), row, t);
    $("#sortFixed tbody").sortable("refresh");
    showIndex($("#sortFixed tbody"));
  });
});

If you create an array of the html rows, you can then use .splice(). If you want to use sortable and manually enter indexes, the above code does this. You can drag them and it will resort or you can enter a number and it will change position (and also refresh sortable).

This means in the end, you can use .sortable("serialize") or .sortable("toArray") as you like.

Hope that helps.

Answer 2

you need to bind input element to oninput event after that do the actions

// Fix the width of the cells

$('td, th', '#sortFixed').each(function() {
  var cell = $(this);
  cell.width(cell.width());
});

$('#sortFixed tbody').sortable().disableSelection();

$('body').on('input', 'input[type="text"]', function() {
  $('tbody tr').removeClass('marker');
  var currentEl = $(this);
  var index = parseInt(currentEl.val());
  if (index <= $('input[type="text"]').length) {
    currentEl.attr('value', index)
    var oldLoc = currentEl.parent().parent()
    var newLoc = $('tbody tr').eq(index-1)
    newLoc.addClass('marker')
    var newLocHtml = newLoc.html()
    newLoc.html(oldLoc.html()).hide().fadeIn(1200);
    oldLoc.html(newLocHtml)
  }
})

tbody tr {
  cursor: move
}

.marker {
  background: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js"></script>

<table id="sortFixed" class="grid">
    <caption>Kurt Vonnegut novels</caption>
    <thead>
        <tr><th>Order</th><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td><input type="text" id='ordem_0' name="order"></td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td><input type="text" id='ordem_1' name="order"></td><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td><input type="text" id='ordem_2' name="order"></td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td><input type="text" id='ordem_3' name="order"></td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td><input type="text" id='ordem_4' name="order"></td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>