jQuery拖拽功能删除元素后其他拖拽元素位置偏移问题求解

• 栅格布局冲突：你使用的col-2是Bootstrap栅格类，默认属于弹性/浮动布局流，所有同层级col-*元素会按顺序排列，只要元素还在文档流内，删除前序元素后后续元素会自动向前补位，单独给元素加position:absolute没有覆盖栅格布局规则，所以不生效。
• 定位基准缺失：给拖拽元素设置position:absolute后，没有给这些元素的直接父容器添加position: relative属性，导致拖拽元素的定位基准变成了上层第一个有定位属性的元素甚至页面视口，位置计算完全错乱。
• 拖拽逻辑缺陷：jQuery UI draggable默认基于元素原有文档流位置计算ui.position，如果元素没有脱离文档流，删除其他元素导致当前元素初始文档流位置变化后，你存储在JSON中的偏移量就会完全不匹配。

1. 调整布局样式，让拖拽元素彻底脱离文档流
   给拖拽容器和元素新增如下样式：

/* 拖拽元素的直接父容器，需要确保所有.movable元素都在该容器下 */
.drag-wrapper {
  position: relative;
  min-height: 600px; /* 根据业务需求设置高度，避免父容器塌陷 */
}

.movable {
  position: absolute !important; /* 强制脱离文档流，覆盖栅格类的布局规则 */
  width: 16.6666667%; /* 等价于col-2的宽度，保留原有尺寸，也可以直接写固定宽度 */
}

2. 调整拖拽初始化逻辑，固定初始定位
   初始化时先给所有拖拽元素写入初始的left/top值，避免依赖文档流位置计算：

$(".movable").each(function() {
  // 如果有历史存储的定位数据，优先用历史数据，否则取初始位置
  const initPos = $(this).position();
  $(this).css({
    left: initPos.left + 'px',
    top: initPos.top + 'px'
  });
  
  $(this).draggable({
    cancel: 'text',
    containment: ".drag-wrapper", // 可选，限制拖拽范围在父容器内
    drag: function(event,ui) {
      // 这里ui.position是相对于父容器的绝对坐标，直接写入JSON即可
      const dragposition = ui.position;
      // 你的JSON存储逻辑
    }
  });
});

3. 删除逻辑无需额外修改，只要所有拖拽元素都已脱离文档流，删除单个元素不会触发其他元素的位置重排。

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