拖放：如果图像是链接（不是链接的URL），如何获取图像的URL [英] Drag and Drop: How to get the URL of image being dropped if image is a link (not the url of the link)

问题描述

我有这个代码：

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

FIDDLE

如果您放弃< img> 元素，它会提醒图片的网址。到目前为止一直很好。

If you drop the <img> element it alerts the url of the image. So far so good.

我的问题是，如果您放弃< a> 元素，它会提醒网址 href < a> 元素。我想在< a> 中提醒< img> 元素的网址，就像你下载了上面例子中的图片。

My problem is that if you drop the <a> element it alerts the url of the href of <a> element. I want to alert the url of the <img> element inside the <a> like if you droped the image in the above example.

这可能吗？

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

I dont mind using Jquery or any other library. I just want to take the url of the image inside a <a> element.

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

The whole point is to drag images-links from other websites to mine and get the url of images.

要更清楚我想要实现的目标，请尝试拖动我的个人资料图片这篇文章并将其放入小提琴中。它提醒 http://stackoverflow.com/users/3074592/laaposto 。我希望 http://i.stack.imgur.com/juvdV.jpg?s=32&g=1 收到提醒。

To be more clear what i am trying to achieve try to drag my profile image just under this post and drop it to fiddle. It alerts http://stackoverflow.com/users/3074592/laaposto. I want http://i.stack.imgur.com/juvdV.jpg?s=32&g=1 to be alerted.

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

I want the solution to work on latest version of Chrome and Firefox.

推荐答案

我认为这是有效的：

http：//fiddle.jshell。 net / 4E92W / 3 /

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

Using jQuery. (I'm just using it to get the "src" attribute so i think you can do without it)

我换了：

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

使用：

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

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

Oh, and I replace the alert with a console.log so you'll need to open it.

编辑：它不适用于Firefox。

It's not working with Firefox.

Edit2：这个似乎适用于两个浏览器：< a href =http://fiddle.jshell.net/4E92W/5/ =noreferrer> http://fiddle.jshell.net/4E92W/5/

Edit2 : This one seems to work with both browser : http://fiddle.jshell.net/4E92W/5/

这篇关于拖放：如果图像是链接（不是链接的URL），如何获取图像的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！