保留position:relative时解决拖拽元素移出容器后隐藏的问题

我来给你几个实用的方案，既能保住父容器的position: relative属性，又能让拖拽元素移出时不被隐藏：

问题的核心其实是父容器的overflow: hidden（或auto/scroll）配合position: relative，会把超出容器范围的内容剪裁掉。所以最简单的办法就是在拖拽开始时临时把父容器的overflow改成visible，拖拽结束后再恢复原来的值。

示例代码：

// 假设拖拽元素的类名是.draggable，左侧菜单容器的类名是.sidebar
const draggableItems = document.querySelectorAll('.draggable');
const sidebarContainer = document.querySelector('.sidebar');
let originalOverflow = '';

draggableItems.forEach(item => {
  // 拖拽开始时修改overflow
  item.addEventListener('dragstart', () => {
    // 先保存原本的overflow值（包括内联样式和计算样式）
    originalOverflow = sidebarContainer.style.overflow || getComputedStyle(sidebarContainer).overflow;
    sidebarContainer.style.overflow = 'visible';
  });

  // 拖拽结束后恢复overflow
  item.addEventListener('dragend', () => {
    sidebarContainer.style.overflow = originalOverflow;
  });
});

这个方案改动极小，不需要调整DOM结构，对现有代码的侵入性很低，适合大多数场景。

如果方案1不适用（比如父容器的overflow不能临时修改），可以在拖拽开始时把元素从原父容器移到页面的body标签下，拖拽结束后再放回原位置。这样元素脱离了原来的父容器，自然不会被剪裁。

示例代码：

const draggableItems = document.querySelectorAll('.draggable');

draggableItems.forEach(item => {
  let originalParent = null;
  let originalPositionIndex = null;

  item.addEventListener('dragstart', (e) => {
    // 记录元素原本的父容器和在父容器中的位置
    originalParent = item.parentElement;
    originalPositionIndex = Array.from(originalParent.children).indexOf(item);
    
    // 把元素移到body下，同时设置fixed定位避免位置跳动
    document.body.appendChild(item);
    item.style.position = 'fixed';
    
    // 根据鼠标位置调整元素的偏移，保证拖拽手感自然
    const itemRect = item.getBoundingClientRect();
    item.style.left = `${e.clientX - itemRect.width / 2}px`;
    item.style.top = `${e.clientY - itemRect.height / 2}px`;
  });

  item.addEventListener('dragend', () => {
    // 把元素放回原父容器的原位置
    originalParent.insertBefore(item, originalParent.children[originalPositionIndex]);
    
    // 重置元素的定位样式，恢复原本的布局
    item.style.position = '';
    item.style.left = '';
    item.style.top = '';
  });
});

这个方案需要处理元素的位置偏移，但兼容性很好，适合复杂的布局场景。

别忘了检查一下父容器的上级容器是否也设置了overflow: hidden，如果有的话，可能需要对上级容器也做类似的处理（比如方案1的临时修改），不过一般情况下处理直接父容器就足够解决问题了。

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