Safari拖拽元素时选中重叠元素文本问题求助

问题本质 #

这是Safari浏览器的原生拖拽行为Bug，和元素的position: sticky无关——即使将头部改为普通块级/固定定位元素，问题依然存在。Chrome和Firefox通过transform: translate(0, 0)让拖拽元素创建独立堆叠上下文，避免选中下层文本，但Safari未正确处理该逻辑，仍会选中拖拽路径上重叠的块级元素文本（内联元素不受影响）。

可行解决方法 #

方案1：拖拽期间全局禁用文本选择 #

通过监听拖拽事件，临时给页面添加禁止文本选择的样式，拖拽结束后恢复，从根源阻止文本被选中：

const draggables = document.querySelectorAll('[draggable="true"]');

draggables.forEach(el => {
  el.addEventListener('dragstart', () => {
    document.body.style.userSelect = 'none';
  });
  
  el.addEventListener('dragend', () => {
    document.body.style.userSelect = '';
  });
});

该方案实现简单，兼容性好，不会干扰其他交互逻辑。

方案2：临时提升拖拽元素层级并禁用下层元素指针事件 #

拖拽开始时，给拖拽元素设置极高z-index，同时让可能重叠的下层元素暂时禁用指针事件：

const draggables = document.querySelectorAll('[draggable="true"]');
const overlaps = document.querySelectorAll('.sticky-header, .page-content > div:not([draggable="true"])');

draggables.forEach(el => {
  el.addEventListener('dragstart', () => {
    el.style.zIndex = '9999';
    overlaps.forEach(item => item.style.pointerEvents = 'none');
  });
  
  el.addEventListener('dragend', () => {
    el.style.zIndex = '';
    overlaps.forEach(item => item.style.pointerEvents = '');
  });
});

需注意：如果页面中有其他可能重叠的元素，需要一并加入overlaps集合。

方案3：自定义拖拽逻辑替代原生拖拽 #

通过鼠标事件（mousedown/mousemove/mouseup）实现完全自定义的拖拽流程，彻底规避Safari的原生Bug：

const draggables = document.querySelectorAll('[draggable="true"]');

draggables.forEach(el => {
  let isDragging = false;
  let startX, startY, initialX, initialY;

  el.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
    initialX = el.offsetLeft;
    initialY = el.offsetTop;
    el.style.cursor = 'grabbing';
    el.style.position = 'relative';
    el.style.zIndex = '9999';
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    el.style.left = `${initialX + dx}px`;
    el.style.top = `${initialY + dy}px`;
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
    el.style.cursor = 'grab';
    el.style.zIndex = '';
  });
});

该方案灵活性最高，但需要额外处理边界限制、拖拽结束定位等逻辑。

总结 #

优先推荐方案1，以最小的代码改动解决问题，且效果稳定可靠。

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