拖放：如果图像是链接（不是链接的 URL），如何获取要拖放的图像的 URL

Question

我有这段代码：

 function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var imageUrl = evt.dataTransfer.getData('URL');
    alert(imageUrl);
}

小提琴

如果删除 <img> 元素，它会提醒图像的 url。到目前为止，一切都很好。

我的问题是，如果您删除 <a> 元素，它会提醒 href 的 url <a> 元素我想提醒 <img> 中的 <a> 就像你在上面的例子中删除图像一样。

那可能吗？

我不介意使用 Jquery 或任何其他库。我只想在 <a> 元素中获取图像的 url。

重点是将图像链接从其他网站拖到我的网站并获取图像的 url。

为了更清楚地说明我想要实现的目标，请尝试将我的个人资料图片拖到这篇文章的正下方并将其放到小提琴上。它提醒 http://stackoverflow.com/users/3074592/laaposto 。我想要提醒 http://i.stack.imgur.com/juvdV.jpg?s=32&g=1 。

我希望该解决方案适用于最新版本的 Chrome 和 Firefox。

原文由 laaposto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 jQuery。 （我只是用它来获取“src”属性，所以我认为你可以不用它）

我更换了：

 var imageUrl = evt.dataTransfer.getData('URL');

和：

 var imageUrl = evt.dataTransfer.getData('text/html');

哦，我用 console.log 替换了警报，所以您需要打开它。

原文由 Needpoule 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以下是我的操作方法（仅在 Firefox 中测试过）：

• 使用 jQuery
• 使用 jQuery 分析丢弃的 html 代码：使用 .find() 搜索图像
• 使用 .attr()

这是我的新 drop(event) 函数的重要部分：

 // Get text/html instead of text/uri-list!
// So you get raw html that is passed even between different websites
var droppedHTML = evt.dataTransfer.getData("text/html");

// add this html to some container.
// if you skip this, the following code won't work if a single img element is dropped
var dropContext = $('<div>').append(droppedHTML);

// now you can read the img-url (not link-url!!) like this:
var imgURL = $(dropContext).find("img").attr('src');

原文由 Friederike 发布，翻译遵循 CC BY-SA 4.0 许可协议