如何获取jQuery UI Sortable中被替换元素的属性？

我明白你的困扰——用prev()确实有局限性，拖到最顶部时就会拿到undefined，而且这也不一定是你真正想要的「被替换」元素。下面给你两种靠谱的解决方案，根据你的需求选就行：

方案1：处理边界情况，兼容顶部位置 #

如果你只是想获取拖拽元素新位置的“相邻参照元素”（拖到顶部时取后一个，其他情况取前一个），可以简单判断prev()是否存在，不存在就用next()：

<table>
  <tbody>
    <tr id="1"><td>1</td><td>item 1</td></tr>
    <tr id="2"><td>2</td><td>item 2</td></tr>
    <tr id="3"><td>3</td><td>item 3</td></tr>
  </tbody>
</table>

<script>
$("tbody").sortable({
  update:function(ev,ui){
    const draggedId = ui.item.attr("id");
    let replacedId;
    
    // 判断前一个元素是否存在，不存在则取后一个
    if (ui.item.prev().length) {
      replacedId = ui.item.prev().attr("id");
    } else {
      replacedId = ui.item.next().attr("id");
    }
    
    alert(`Moved #${draggedId} to position adjacent to #${replacedId}`);
  }
});
</script>

这个方法简单直接，完美解决了拖到顶部出现undefined的问题。

方案2：精准获取「被交换位置」的元素 #

如果你想要的是和拖拽元素交换位置的那个元素（比如把item3拖到item1的位置，item1会移到item3原来的位置，此时你想拿到item1的ID），那就需要记录排序前的元素顺序，再对比排序后的位置：

<table>
  <tbody>
    <tr id="1"><td>1</td><td>item 1</td></tr>
    <tr id="2"><td>2</td><td>item 2</td></tr>
    <tr id="3"><td>3</td><td>item 3</td></tr>
  </tbody>
</table>

<script>
let initialOrder; // 存储排序前的元素ID顺序

$("tbody").sortable({
  start: function(ev, ui) {
    // 在拖拽开始时，记录所有元素的ID顺序
    initialOrder = $(this).find("tr").map(function() {
      return $(this).attr("id");
    }).get();
  },
  update: function(ev, ui) {
    const draggedId = ui.item.attr("id");
    const newIndex = ui.item.index(); // 拖拽元素的新位置索引
    const originalIndex = initialOrder.indexOf(draggedId); // 拖拽元素的原始位置索引
    
    // 原始位置现在的元素，就是被交换的元素
    const replacedId = $(this).find("tr").eq(originalIndex).attr("id");
    
    alert(`Moved #${draggedId} from position ${originalIndex+1} to ${newIndex+1}, swapped with #${replacedId}`);
  }
});
</script>

这个方法能精准定位到和拖拽元素交换位置的元素，不管你拖到哪个位置都能正确获取ID。

另外提一下，jQuery UI Sortable的ui对象里还有originalPosition和position属性，也可以用来辅助判断位置变化，但上面两种方法已经足够解决你的问题啦。

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