使用jQuery UI拖拽元素时同步更新对应数组索引的问题及优化

问题描述 #

我通过循环数组动态向容器添加元素，用jQuery UI实现了拖拽排序功能，功能本身正常，但拖拽改变元素位置时，同步更新数组对应项索引的代码在部分场景有效，其他场景异常，希望修复。

更新1：绿色块上的数字必须和数组中的数字位置完全对应。

原始问题代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div class="container">
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 3%;
  background-color: yellow;
}

.wrapper {
  display: flex;
  width: 15vw;
  height: 8vh;
  cursor: pointer;
  margin-bottom: 5%;
  background-color: green;
}

JavaScript

function array_move(arr, old_index, new_index) {
  if (new_index >= arr.length) {
    var k = new_index - arr.length + 1;
    while (k--) {
      arr.push(undefined);
    }
  }
  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
  return arr;
};

let myArr = [1, 2, 3, 4]

for (var i = 0; i < myArr.length; i++) {
  $('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}

let firstIndex;
let secondIndex;

$('.container').sortable({
  update: function(event, div) {
    firstIndex = div.item.attr('id')
  },
  stop: function(event, div) {
    secondIndex = div.item.index()
    array_move(myArr, firstIndex, secondIndex)
    console.log(myArr)
  }
})

可用版本（更新2） #

以下是能正常工作的版本，欢迎提供优化建议：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div class="container">
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 3%;
  background-color: yellow;
}

.wrapper {
  display: flex;
  width: 15vw;
  height: 8vh;
  cursor: pointer;
  margin-bottom: 5%;
  background-color: green;
}

JavaScript

function array_move(arr, old_index, new_index) {
  if (new_index >= arr.length) {
    var k = new_index - arr.length + 1;
    while (k--) {
      arr.push(undefined);
    }
  }
  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
  return arr;
};

let myArr = [1, 2, 3, 4]

for (var i = 0; i < myArr.length; i++) {
  $('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}

$('.container').sortable({
  stop: function(event, div) {
    let elemId = div.item.attr('id')
    let elemIndex = div.item.index()

    array_move(myArr, elemId, elemIndex)

    $('.container').html(``)
    for (var i = 0; i < myArr.length; i++) {
      $('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
    }

    console.log(myArr)
  }
})

问题分析与优化建议 #

问题根源 #

原始代码的核心问题是：拖拽后只更新了数组，但DOM元素的id还是初始的索引值，下次拖拽时获取的elemId是旧索引，并非数组中的真实位置，导致后续数组操作出错。更新后的版本通过重新渲染整个DOM来重置id，虽然可行，但频繁销毁重建DOM元素会影响性能。

优化方案 #

1. 避免全量DOM渲染
   不需要清空容器再重新创建元素，数组更新后直接遍历现有元素，逐个更新id和显示内容即可，减少DOM操作开销：

   // 替换原有的清空重渲染代码
   $('.container .wrapper').each(function(index) {
     $(this).attr('id', index).text(myArr[index]);
   });
   

2. 简化数组移动函数
   拖拽排序场景下，元素不会被放到超出数组长度的位置（容器内元素数量和数组长度始终一致），可以移除多余的边界处理逻辑，同时统一索引类型避免隐式转换错误：

   function array_move(arr, old_index, new_index) {
     old_index = Number(old_index);
     new_index = Number(new_index);
     // 兜底处理极端越界情况
     if (old_index < 0 || old_index >= arr.length || new_index < 0 || new_index >= arr.length) {
       return arr;
     }
     const item = arr.splice(old_index, 1)[0];
     arr.splice(new_index, 0, item);
     return arr;
   };
   

3. 封装渲染逻辑
   将初始化渲染的代码封装成函数，便于后续复用，代码结构更清晰。

优化后的完整代码 #

JavaScript

function array_move(arr, old_index, new_index) {
  old_index = Number(old_index);
  new_index = Number(new_index);
  if (old_index < 0 || old_index >= arr.length || new_index < 0 || new_index >= arr.length) {
    return arr;
  }
  const item = arr.splice(old_index, 1)[0];
  arr.splice(new_index, 0, item);
  return arr;
};

let myArr = [1, 2, 3, 4];

// 封装渲染函数
function renderItems() {
  $('.container').empty();
  myArr.forEach((num, index) => {
    $('.container').append(`<div class="wrapper" id="${index}">${num}</div>`);
  });
}
renderItems();

$('.container').sortable({
  stop: function(event, ui) {
    const oldIndex = ui.item.attr('id');
    const newIndex = ui.item.index();
    // 更新数组
    array_move(myArr, oldIndex, newIndex);
    // 同步更新DOM元素的id和内容
    $('.container .wrapper').each(function(index) {
      $(this).attr('id', index).text(myArr[index]);
    });
    console.log(myArr);
  }
});

HTML和CSS部分保持不变即可。

内容的提问来源于stack exchange，提问作者seriously