Обновление значений порядка сортировки с использованием сортируемого виджета jquery -ui - PullRequest
Новая
       10

Обновление значений порядка сортировки с использованием сортируемого виджета jquery -ui

0 голосов
/ 26 февраля 2020

У меня есть вид, который отображает пару divs. Эти divs можно сортировать / перетаскивать с помощью jquery сортируемого виджета -ui .
Я пытаюсь обновить значение поля ввода на основе позиции div. Тем не менее, я только получил это далеко: я обновляю html целых div вместо обновления value содержащего поля ввода. Какой из них лучше всего использовать для обновления value полей ввода вместо полных элементов 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

Я нашел этих примеров в стеке, но они не обновляются любые значения поля ввода либо.

1 Ответ

1 голос
/ 26 февраля 2020

Все, что вам нужно сделать, это добавить обновление 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);
...