使用 jquery-ui 的可排序小部件更新排序顺序值

Question

我有一个显示几个divs的视图。 这些divs可以使用jquery-ui 的 sortable widget进行排序/拖动。
我正在尝试根据 div 的位置更新输入字段的值。 但是，我只做到了这一点：我正在更新整个div的html而不是更新包含输入字段的value 。 哪个是用于更新输入字段的value而不是整个 div 的 html 的最佳选择器？

HTML

<div id="sortable" class="ui-sortable">
  <div class="ui-state-default">0<input id="sort_order_1" name="sort_order[]" type=text value="0"></div>
  <div class="ui-state-default">1<input id="sort_order_2" name="sort_order[]" type=text value="1"></div>
  <div class="ui-state-default">2<input id="sort_order_3" name="sort_order[]" type=text value="2"></div>
  <div class="ui-state-default">3<input id="sort_order_4" name="sort_order[]" type=text value="3"></div>
  <div class="ui-state-default">4<input id="sort_order_5" name="sort_order[]" type=text value="4"></div>
  <div class="ui-state-default">5<input id="sort_order_6" name="sort_order[]" type=text value="5"></div>
  <div class="ui-state-default">6<input id="sort_order_7" name="sort_order[]" type=text value="6"></div>
</div>

JavaScript

       $(function() {
          $('#sortable').sortable({
            start: function(event, ui) {
              var start_pos = ui.item.index();
              ui.item.data('start_pos', start_pos);
            },
            change: function(event, ui) {
              var start_pos = ui.item.data('start_pos');
              var index = ui.placeholder.index();


              cIndex = (start_pos < index) ? index - 2 : index - 1;
              ui.placeholder.prevAll('div').each(function() {
                $this = $(this);
                if ($this.is(ui.item)) {
                  return;
                }
                $this.html(cIndex);
                cIndex--;
              });

              cIndex = (start_pos < index) ? index : index + 1;
              ui.placeholder.nextAll('div').each(function() {
                $this = $(this);
                if ($this.is(ui.item)) return;
                $this.html(cIndex)
                cIndex++;
              });

              ui.item.html((start_pos < index) ? index - 1 : index);
            },
            axis: 'y'
          });
        });

JSFiddle

我在 stackoverflow 上找到了这些示例，但它们也没有更新任何输入字段值。

Answer 1

您所要做的就是在每个函数中添加val()更新。 我注释掉了.html(); 函数，因为它们会删除您的输入字段。

上一篇：

ui.placeholder.prevAll('div').each(function() {
    $this = $(this);
    if ($this.is(ui.item)) {
        return;
    }
    //$this.html(cIndex);
    $this.find('input[type=text]').val(cIndex);
    cIndex--;
});

下一个：

ui.placeholder.nextAll('div').each(function() {
    $this = $(this);
    if ($this.is(ui.item)) return;
    //$this.html(cIndex);
    $this.find('input[type=text]').val(cIndex);
    cIndex++;
});

分拣机：

//ui.item.html((start_pos < index) ? index - 1 : index);
ui.item.find('input[type=text]').val((start_pos < index) ? index - 1 : index);