ondragstart事件如何移除拖动起始时的半透明幽灵动画效果

当用户拖动设置了draggable="true"的元素时，浏览器默认会生成该元素的半透明副本（也叫拖动幽灵图像），作为拖动过程的默认预览效果。

我最初尝试用event.preventDefault()阻止默认行为来去掉这个预览，但是该操作会直接中断整个拖动流程，导致后续的onDrag事件完全无法触发，而我需要从onDrag事件中获取鼠标位置等实时数据。目前常见的方案大多只处理拖动释放时的动画，没有针对拖动起始阶段的预览禁用方案。

我之前的错误实现代码如下：

function dragStart(event) {
  console.log(event);
  event.preventDefault(); // 虽然能去掉半透明预览，但会导致ondrag事件完全不触发
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  console.log(event);
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}

上述代码运行后，半透明预览确实消失了，但是console.log的输出可以确认ondrag事件完全没有触发，而这部分事件的数据是业务必需的。另外如果把preventDefault()放到ondrag回调里调用，也无法阻止拖动起始阶段的默认预览生成。

可以通过将拖动预览图设置为透明图片的方式实现需求，该方案不会中断拖动流程，所有拖动相关事件都可以正常触发，仅隐藏了默认的半透明幽灵图像。

具体实现代码如下：

function dragStart(event) {
  // 生成1*1像素的透明GIF图（无需额外引入静态资源）
  const transparentPreview = new Image();
  transparentPreview.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  // 将拖动预览设置为上述透明图，偏移量设置为0即可
  event.dataTransfer.setDragImage(transparentPreview, 0, 0);

  // 原有逻辑保持不变
  event.dataTransfer.setData("Text", event.target.id);
}

function dragging(event) {
  // ondrag事件可正常触发，能正常获取鼠标位置等所有事件数据
  console.log(event.clientX, event.clientY);
  document.getElementById("demo").innerHTML = "The p element is being dragged";
}

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