jQuery UI Sortable二次拖拽元素变为绝对定位问题求助

我之前碰到过一模一样的情况，大概率是你在排序过程中的DOM操作和样式修改干扰了jQuery UI Sortable的内部定位逻辑，咱们一步步来修复：

1. 优化排序过程中的DOM操作 #

你在sort事件里循环修改.numeral的内容，这个操作会触发频繁的DOM重绘，很容易打乱Sortable对元素位置的跟踪。其实排序过程中根本不需要实时更新序号，把这部分逻辑移到排序结束后的stop事件里就好。

2. 修复handle变量的作用域问题 #

你直接用了全局的handle变量，第二次拖拽时可能还引用着上一次的元素，导致样式混乱。把它改成事件内部的局部变量就没问题了：

x.sortable({
  axis: 'y',
  handle: '.handle',
  placeholder: 'sortable-placeholder',
  opacity: 0.5,
  sort: function(event, ui){
    // 定义局部handle变量，避免全局污染
    const handle = ui.item.find(".handle");
    handle.removeClass("fi-list").addClass("fi-shopping-bag");
    ui.item.addClass("freshest");
    $(".sortable-placeholder").height(ui.item.outerHeight());
  },
  stop: function(event,ui){
    ui.item.removeClass("freshest"); // 先去掉动画避免冲突
    // 同样用局部变量
    const handle = ui.item.find(".handle");
    handle.removeClass("fi-shopping-bag").addClass("fi-list");
    // 序号更新移到这里，排序结束后再统一处理
    let i = 1;
    $(this).find('.numeral').each(function() {
      $(this).html(i);
      i++;
    });
    // 如果需要动画，延迟执行避免干扰Sortable
    setTimeout(() => {
      ui.item.removeClass("freshest", {duration:1000});
    }, 50);
  },
  update: function (event, ui) {
    updateSort(this);
  }
}).disableSelection();

3. 检查占位符的样式兼容性 #

自定义占位符高度时，要确保它的CSS和列表项完全匹配，比如padding、border这些属性，不然Sortable计算位置时容易出错。可以试试去掉手动设置高度的代码，让Sortable自动处理：

.sortable-placeholder {
  border: 1px dashed #ccc;
  visibility: visible !important;
  /* 继承列表项的内边距等样式 */
  padding: inherit;
}

调整完这些之后，第二次拖拽的定位问题应该就能解决了。核心就是减少排序过程中对DOM和样式的频繁修改，避免干扰Sortable的内部定位机制。

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