如何使用自定义可拖动/拖动重影图像？

Question

我已经红色并搜索了很多帖子的答案，但仍然找不到可以回答我的问题的答案。

如何更改或使用

draggable

元素的自定义重影图像？

我在

dragging

状态下某处变红，它会生成

dragged

元素的快照图像，如果是这样，那么如何更改元素的外观？

以下是

dragged

元素外观的一些截图：

拖动时的更多示例：

预期结果应如下所示：

你可以清楚地看到

dragged

元素有一些非常错误的地方

而不是显示原始元素的

ghost image

具有通用

0.5 opacity

的精确副本

A

radial gradient

和

opacity

应用于

dragged

元素

此外，

radial gradient

布局基于

mouse

的单击位置（在图2中，

text

几乎是

invisible

，因为

mouse

是在元素末尾单击的）

我在

google chrome

和

microsoft edge

,

中测试了相同的网页

但是两者都以相同的样式显示

ghost image

（

radial gradient

与

opacity

）

我在

pure html

('.html

), 

reactjs

, 

nextjs

 etc and they all show the same (

径向渐变

with

不透明度

) 

鬼像

when the element is

拖动`

中重新创建了相同的示例代码

在这个阶段我很茫然，完全不知道如何解决这个问题

有谁能解释一下为什么会发生这种情况或如何解决这个问题吗？

Answer 1

来自 mdn web 文档 - 拖动操作:

发生拖动时，拖动目标会生成半透明图像

所以基本上浏览器会创建拖动元素的屏幕截图，该元素可以在浏览器窗口内甚至外部移动

但是您可以使用 setDragImage() 来指定自定义拖动反馈图像：

function dragWithCustomImage(event) {
  const canvas = document.createElement("canvas");
  canvas.width = canvas.height = 50;

  const ctx = canvas.getContext("2d");
  ctx.lineWidth = 4;
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.moveTo(0, 50);
  ctx.lineTo(50, 0);
  ctx.stroke();

  const dt = event.dataTransfer;
  dt.setData("text/plain", "Data to Drag");
  dt.setDragImage(canvas, 25, 25);
}

您还可以配置拖动效果

例如，您可以将拖动效果设置为

move

或

copy

。