嘿，我看了你的Function Machine代码和问题，咱们来搞定这个拖拽幽灵图消失的事儿！首先，我发现几个可能的问题，咱们一步步来修复：

1. 移除嵌套的draggable="true"属性 #

你的HTML里，<li>和里面的<div>都设置了draggable="true"，这会导致拖拽事件的目标混乱——浏览器可能不知道该生成哪个元素的幽灵图。咱们只保留需要拖拽的<div>的draggable属性，把<li>的这个属性去掉：

<!-- 修改后的示例li元素 -->
<li>
  <span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
  <div id="add1" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="1">
    Add 1
  </div>
</li>

2. 修正drag()函数的实现 #

幽灵图消失最常见的原因之一是在dragstart事件中没有正确设置dataTransfer数据——浏览器需要这个数据来生成默认的幽灵图。另外，还要确保你获取的是正确的拖拽元素（比如用户点击的是图标<span>时，要找到对应的<div>）。

把你的drag()函数改成这样：

function drag(event) {
  // 找到真正的拖拽目标：带.number类的div
  const dragTarget = event.target.closest('.number');
  if (!dragTarget) return;

  // 将需要的操作数据存入dataTransfer，这是幽灵图显示的关键！
  const transferData = `${dragTarget.dataset.operation}-${dragTarget.dataset.value}`;
  event.dataTransfer.setData('text/plain', transferData);

  // 可选：设置拖拽效果，让浏览器知道允许的操作类型
  event.dataTransfer.effectAllowed = 'move';
}

为什么这样有效？ #

• event.target.closest('.number')确保不管用户点击的是<div>本身还是里面的图标，都能找到正确的拖拽元素
• 必须设置dataTransfer.setData()——即使你后续不需要用这些数据，浏览器也需要它来生成默认的幽灵图
• 明确设置effectAllowed可以帮助浏览器正确渲染拖拽反馈

3. 额外检查点 #

如果做完上面两步还是有问题，可以检查：

• 你的CSS有没有对.number元素设置opacity: 0、display: none或者其他会隐藏元素的样式
• 确保没有在dragstart事件中调用event.preventDefault()，这会阻止浏览器的默认拖拽行为

这样修改后，拖拽时的幽灵图应该就能正常显示啦！

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