可排序不改变ID答案

【问题标题】：Sortable not changing ids可排序不改变ID
【发布时间】：2018-11-23 15:10:04
【问题描述】：

我希望能够在拖放时将所有 id 替换为另一个。

例如在这段代码中：

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

  }
});

上面代码中的想法是获取被移动和替换的那个的 id 编号，并且对于每个 id，在它们中的每一个中替换另一个的编号。

但它并没有做我想做的事。知道为什么吗？

小提琴：https://jsfiddle.net/763opz0c/

【问题讨论】：

为什么首先需要更改 id？
@charlietfl 好问题，因为我使用的系统根据_X 的顺序生成数据。因此，当我更改订单时，我还需要更改该信息，以便数据正确。这有点难以解释，因为上面的例子只解释了一小部分，我需要修复的部分。
因此您可以在系统存储项目顺序的任何位置进行更新
@charlietfl 实际上这里的想法是更改_X 所以当我单击生成数据的按钮时，它们会以正确的顺序生成。我觉得我快到了，但我不明白为什么我的代码不起作用，因为我背后的逻辑似乎没问题。我将在编辑中解释我的逻辑。
当然可以，只是看起来比它需要做的要复杂得多。你不能只使用索引吗？无论如何...创建一个可运行的演示，以便在开发工具控制台中查看发生了什么

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

我的建议是遍历所有项目并使用它们在容器中的索引来更新所有 id 的

$('.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 demo

【讨论】：

这太完美了，谢谢！（抱歉回复晚了……）