如何让拖拽幽灵在越界放置时回到新位置而非初始位置？

你的问题核心是：原生拖拽的幽灵元素由浏览器控制，当你在列表容器外完成放置时，浏览器默认会让幽灵返回拖拽起始位置，但此时你的列表状态已经通过handleDragOver实时更新为新排序，导致视觉和实际状态不匹配。

下面是两种可行的解决思路：

思路一：阻止全局默认行为 + 隐藏默认幽灵元素 #

1. 拦截容器外的拖拽事件 #

给document添加全局监听，阻止容器外的dragover和drop默认行为，避免浏览器触发幽灵元素复位：

useEffect(() => {
  const handleGlobalDragOver = (e) => {
    // 仅针对我们的酒店项拖拽做处理
    if (e.target.closest('.hotel-item')) { // 替换成你的酒店项类名
      e.preventDefault();
    }
  };

  const handleGlobalDrop = (e) => {
    if (e.target.closest('.hotel-item')) {
      e.preventDefault();
      // 如果业务需要，这里可以添加容器外放置的逻辑（比如重置排序）
      // 若无需重置，仅阻止默认行为即可
    }
  };

  document.addEventListener('dragover', handleGlobalDragOver);
  document.addEventListener('drop', handleGlobalDrop);

  return () => {
    document.removeEventListener('dragover', handleGlobalDragOver);
    document.removeEventListener('drop', handleGlobalDrop);
  };
}, []);

2. 隐藏默认幽灵元素 #

在handleDragStart中设置一个空的拖拽图像，替换浏览器默认的幽灵元素，彻底避免它的显示：

const handleDragStart = (e, index) => {
  const draggedHotelKey = Object.keys(hotelList)[index];
  const draggedHotel = hotelList[draggedHotelKey];

  setDraggedItem({
    hotel      : draggedHotel,
    startIndex : index,
  });

  e.dataTransfer.effectAllowed = "move";
  
  // 创建空元素作为拖拽图像，隐藏默认幽灵
  const emptyDragImage = document.createElement('div');
  emptyDragImage.style.width = '0';
  emptyDragImage.style.height = '0';
  e.dataTransfer.setDragImage(emptyDragImage, 0, 0);
};

思路二：延迟状态更新到drop阶段 #

放弃在handleDragOver中实时更新列表，只记录拖拽的起始索引和目标索引，直到handleDrop时再一次性修改列表状态。这种方式下，DOM状态和浏览器幽灵元素的行为会保持一致：

// 新增状态记录目标索引
const [targetIndex, setTargetIndex] = useState(undefined);

const handleDragStart = (e, index) => {
  const draggedHotelKey = Object.keys(hotelList)[index];
  const draggedHotel = hotelList[draggedHotelKey];

  setDraggedItem({
    hotelKey   : draggedHotelKey,
    startIndex : index,
  });

  e.dataTransfer.effectAllowed = "move";
};

const handleDragOver = (e, index) => {
  e.preventDefault();
  if (index === draggedItem?.startIndex) return;
  setTargetIndex(index); // 仅记录目标位置，不更新列表
};

const handleDrop = async (e) => {
  e.preventDefault();
  if (!draggedItem || targetIndex === undefined || targetIndex === draggedItem.startIndex) return;

  try {
    const hotelKeys = Object.keys(hotelList);
    const [removedHotelKey] = hotelKeys.splice(draggedItem.startIndex, 1);
    hotelKeys.splice(targetIndex, 0, removedHotelKey);

    const updatedHotelList = hotelKeys.reduce((acc, key) => {
      acc[key] = hotelList[key];
      return acc;
    }, {});

    setHotelList(updatedHotelList);
    await dispatch(updateHotelList(selectedEventId, updatedHotelList));
  } catch (error) {
    console.error("Failed to update hotel list:", error);
    setHotelList(initialHotelList);
  } finally {
    setDraggedItem(null);
    setTargetIndex(undefined);
  }
};

两种思路对比 #

• 思路一适合需要实时预览排序效果的场景，通过隐藏幽灵元素或拦截全局事件解决视觉不一致问题。
• 思路二更贴合原生拖拽的设计逻辑，减少实时DOM重绘，同时从根源避免幽灵元素的行为冲突。

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