SolidJS原生拖拽：移除幽灵图像中显示的兄弟元素

核心原因 #

原生HTML5拖拽的默认幽灵图像（drag image）会基于拖拽触发元素的当前渲染区域生成，如果拖拽元素和兄弟元素处于同一布局流中（无独立容器隔离），浏览器可能会误将兄弟元素也包含进幽灵图像内。

解决方案：自定义拖拽幽灵图像 #

最可靠的处理方式是在onDragStart事件中，通过dataTransfer.setDragImage()手动指定幽灵图像，只保留需要拖拽的元素内容，彻底排除兄弟元素。

修改你的onDragStart代码 #

在原有逻辑中添加自定义幽灵图的处理：

const onDragStart: main.Attributes['onDragStart'] = (event) => {
  setClass(`${classe} ${STRINGS.DRAG_CLASS}`);
  event.stopPropagation();
  const dataTransfer = event.dataTransfer as DataTransfer;
  dataTransfer.effectAllowed = 'uninitialized';

  // --- 新增：自定义拖拽幽灵图逻辑 ---
  const dragElement = event.currentTarget as HTMLElement;
  // 克隆拖拽元素（仅克隆自身，不包含兄弟节点）
  const clone = dragElement.cloneNode(true) as HTMLElement;
  // 设置临时样式，避免干扰页面布局
  clone.style.position = 'fixed';
  clone.style.top = '-9999px';
  clone.style.left = '-9999px';
  clone.style.margin = '0';
  // 临时添加到文档中（浏览器需要读取DOM元素生成图像）
  document.body.appendChild(clone);
  // 指定自定义幽灵图，参数2、3是拖拽时鼠标相对图像的偏移量
  dataTransfer.setDragImage(clone, 0, 0);
  // 拖拽开始后立即移除临时克隆体
  setTimeout(() => document.body.removeChild(clone), 0);
  // --- 新增结束 ---

  if (dragOnly) {
    prepareForCreation({ classe, component, ..._props });
  } else {
    startDrag({ id });
  }
  setTimeout(() => {
    if (dragOnly) {
      setClass(`${cl} ${_backClass}`);
    } else {
      setClass(`${classe} ${_backClass}`);
    }
  }, 5);
};

备选方案：临时隐藏兄弟元素 #

如果自定义幽灵图的方式不符合需求，可在拖拽开始时临时隐藏兄弟元素，拖拽结束后恢复显示：

// 在onDragStart中隐藏兄弟元素
const onDragStart: main.Attributes['onDragStart'] = (event) => {
  // ... 原有代码
  const dragElement = event.currentTarget as HTMLElement;
  // 根据实际结构获取兄弟元素（此处以紧邻的下一个兄弟为例）
  const sibling = dragElement.nextElementSibling;
  if (sibling) {
    (sibling as HTMLElement).style.visibility = 'hidden';
  }
  // ... 原有代码
};

// 在onDragEnd中恢复显示
const onDragEnd: main.Attributes['onDragEnd'] = () => {
  setClass(dragOnly ? cl : classe);
  stopDrag();
  const dragElement = document.getElementById(id);
  if (dragElement) {
    const sibling = dragElement.nextElementSibling;
    if (sibling) {
      (sibling as HTMLElement).style.visibility = 'visible';
    }
  }
};

注意事项 #

• 自定义幽灵图时，克隆元素必须临时添加到DOM中，否则浏览器无法生成有效图像。
• 若拖拽元素包含复杂样式，需确保克隆体保留原样式，保证幽灵图与原元素视觉一致。
• 结合SolidJS开发时，注意临时克隆元素不要触发不必要的状态更新。

内容的提问来源于stack exchange，提问作者Charles-Lévi BRIANI