使用<input>的jQuery UI Sortable Position

Question

該表http://jsfiddle.net/rp4fV/477/具有輸入元素，我需要對添加數字的行進行排序並通過拖動獲得結果，例如，如果我在第4行輸入2，則第4行自動起床以替換第2行以及所有行的排序都取決於新的更改，是否有任何建議建議執行此操作？ 我知道如何使用拖動來做到這一點，但使用輸入我不知道如何做到這一點。

這樣做的原因是，有很多行，有時拖動時我無法識別正確的位置。

碼：

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

Answer 1

您需要在操作之后將輸入元素綁定到oninput事件

 // 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> 

Answer 2

它可能比您想要的要復雜，但是我希望這會有所幫助。

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"));
  });
});

如果創建html行的數組，則可以使用.splice() 。 如果要使用可排序並手動輸入索引，則上面的代碼會執行此操作。 您可以拖動它們，它會重新排序，或者您可以輸入數字，它會更改位置（並刷新可排序的）。

這意味着最后，您可以根據需要使用.sortable("serialize")或.sortable("toArray") 。

希望能有所幫助。