在DragEnter事件中更改拖动图像

Question

我试图定义当我在页面中拖动元素时出现的图像。我看到了如何在那个链接中使用DataTransfer.setDragImage()，但对我来说它不起作用。我的代码和示例之间有两个不同之处:

• 我正试图通过DragEnter事件进行此更改，而链接在DragStart中完成;
• 要拖动的图像将在用户的文件资源管理器中，而不是在HTML文档中。

我已经做了一个测试，图像正在正确生成。以下是负责此功能的代码:

function handleDragEnter(event)
{
const img = new Image;
const reader = new FileReader;
reader.readAsDataURL((new Blob(icon(faPhotoFilmMusic).html, { type: 'image/svg+xml' })));
reader.addEventListener('load', () => {
img.src = reader.result;
event.dataTransfer.setDragImage(img, 10, 10);
});
}

Answer 1

我认为问题在于缺少括号:

function handleDragEnter(event)
{
const img = new Image(); // <=== change this 
const reader = new FileReader(); // <=== change this 
reader.readAsDataURL((new Blob(icon(faPhotoFilmMusic).html, { type: 'image/svg+xml' })));
reader.addEventListener('load', () => {
img.src = reader.result;
event.dataTransfer.setDragImage(img, 10, 10);
});
}