拖放:如果图像是链接(不是链接的URL),如何获取图像的URL

Question

我有这个代码:

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

小提琴

如果删除<img>元素,它会提醒图像的URL.到现在为止还挺好.

我的问题是,如果你删除的<a>元素它会提醒的网址href的<a>元素.如果您在上面的示例中下载图像,我想提醒<img>内部元素的url <a>.

那可能吗？

我不介意使用Jquery或任何其他库.我只想把图像的url放在一个<a>元素中.

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

为了更清楚我想要实现的目标,请尝试在此帖子下拖动我的个人资料图片并将其放入小提琴中.它提醒http://stackoverflow.com/users/3074592/laaposto.我想http://i.stack.imgur.com/juvdV.jpg?s=32&g=1收到提醒.

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

Answer 1

我认为这是有效的:

http://fiddle.jshell.net/4E92W/3/

使用jQuery.(我只是用它来获取"src"属性所以我认为你可以不用它)

我换了:

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

附:

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

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

编辑:它不适用于Firefox.

Edit2:这个似乎适用于两个浏览器:http://fiddle.jshell.net/4E92W/5/

Answer 2

这是我如何做到的(仅在Firefox中测试过):

• 使用jQuery
• 使用jQuery分析丢弃的html代码:用里面搜索图像 .find()
• 从找到的图像中读取src属性 .attr()

这是我的新drop(事件)函数的重要部分:

// 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');

这是工作中的JSFiddle:http://fiddle.jshell.net/4r7dT/1/

是的:您可以将用户图标拖放到该框中,然后获取img网址.;)