滚动Div中拖拽卡片无法吸附插槽的问题排查与解决求助

这个问题的核心在于绝对定位元素与滚动容器的相对关系处理不当：当你的滚动容器（#dropdiv）滚动时，插槽的文档级偏移（.offset()）会变化，但你之前的代码没有正确计算卡片相对于滚动容器的相对位置，而是错误地使用了文档级坐标来调整，导致卡片无法跟着插槽走。

修复步骤及代码调整 #

1. 确保滚动容器的定位属性

首先，给滚动容器设置position: relative，这样内部的绝对定位元素会以它为基准：

#dropdiv {
  position: relative;
  overflow: auto;
  /* 保留你的其他原有样式 */
}

2. 修正拖拽结束（drop）时的定位初始化

在卡片放入插槽的drop回调中，要把卡片的父元素改为滚动容器，并初始化它相对于插槽的位置（相对于滚动容器）：

$("#answerone").droppable({
  drop: function(event, ui) {
    const $slot = $(this);
    const $card = ui.draggable;
    
    // 关闭拖拽回退效果
    $card.draggable('option', 'revert', false);
    
    // 获取插槽相对于滚动容器的位置（.position() 返回的是相对于父元素的坐标）
    const slotRelativePos = $slot.position();
    
    // 设置卡片的绝对定位，以滚动容器为基准
    $card.css({
      position: 'absolute',
      top: slotRelativePos.top + 'px',
      left: slotRelativePos.left + 'px',
      margin: 0, // 移除默认margin避免对齐偏差
      zIndex: 10 // 确保卡片在插槽上方显示
    });
    
    // 将卡片移动到滚动容器内部，确保定位基准正确
    $card.appendTo('#dropdiv');
  }
});

3. 滚动事件中同步卡片与插槽的位置

在滚动容器的scroll事件中，只需要获取插槽相对于滚动容器的位置，然后同步卡片的位置即可：

$('#dropdiv').scroll(function() {
  const $slot = $("#answerone");
  const $card = $("#card1");
  
  // 再次获取插槽相对于滚动容器的实时位置
  const slotRelativePos = $slot.position();
  
  // 更新卡片位置，保持与插槽完全重合
  $card.css({
    top: slotRelativePos.top + 'px',
    left: slotRelativePos.left + 'px'
  });
});

为什么之前的代码无效？ #

• 你之前使用.offset()获取的是元素相对于整个文档的坐标，当滚动容器滚动时，这个坐标会随着容器的滚动而变化，但卡片的绝对定位如果不是以滚动容器为基准，就无法正确响应这种变化。
• 没有将卡片的父元素设置为滚动容器，导致卡片的绝对定位基准是文档（或其他上层元素），而非滚动容器，滚动时自然无法同步位置。

这样调整后，卡片会始终以滚动容器为定位基准，滚动时就能和插槽保持吸附状态了。

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