Сортируемый без изменения идентификаторов - PullRequest
Новая
       10

Сортируемый без изменения идентификаторов

0 голосов
/ 23 ноября 2018

Я хочу иметь возможность при перетаскивании заменять все идентификаторы на другие.

Например, в этом коде: 

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
  <div class="row" id="row_1">
    <div class="col-md-12">
      <form id="form_1" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_1">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_1">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

Я хочу иметь возможностьизменить, когда я перетаскиваю все id="form_0" <-> id="form_1", id="row_0" <-> id="row_1", id="test1_0" <-> id="test1_1" .. и т. д., это только пример, есть и другие.

Я знаю, что мы можем использовать опцию stop следующим образом: 

$('.container').sortable({
  stop: function(event, ui) {
    var moved = ui.item,
      replaced = ui.item.prev();

    if (replaced.length == 0) {
      replaced = ui.item.next();
    }

    var moved_num = parseInt(moved.attr("id").match(/\d+/g), 10) + 1;
    var replaced_num = parseInt(replaced.attr("id").match(/\d+/g), 10) + 1;

    moved.find('[id]').each(function() {
      var $this = $(this),
        split = $this.prop('id').split('_')[0];
      $this.prop('id', $this.prop('id').split('_')[0] + '_' + replaced_num);
    });
    replaced.find('[id]').each(function() {
      var $this = $(this),
        split = $this.prop('id').split('_')[0];
      $this.prop('id', $this.prop('id').split('_')[0] + '_' + moved_num);
    });

  }
});

Идея, приведенная здесь в коде выше, состоит в том, чтобы получить номер идентификатора перемещенного и замененного,и для каждого идентификатора замените в каждом из них номер другого.

Но он не делает то, что я пытаюсь сделать.Есть идеи почему?

Скрипка: https://jsfiddle.net/763opz0c/

1 Ответ

0 голосов
/ 23 ноября 2018

Мое предложение состоит в том, чтобы просмотреть все элементы и использовать их индекс в контейнере для обновления всех идентификаторов 

$('.container').sortable({
  stop: function(event, ui) {
     var $items = $(ui.item).parent().children()
     $items.each(function(index){
         $(this).find('[id]').add(this).attr('id', function(){
             return this.id.split('_')[0] +'_' + index 
         });
     });     
  }
});

Демонстрация Fiddle

...