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

我有这个代码：

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

小提琴

如果删除元素，它会提醒图像的URL。 到现在为止还挺好。

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

那可能吗？

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

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

为了更清楚我想要实现的目标，请尝试在此post下拖动我的个人资料图片并将其放入小提琴中。 它提醒http://stackoverflow.com/users/3074592/laaposto 。 我希望http://sofzh.miximages.com/javascript/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()搜索内部图像
• 使用.attr()从找到的图像中读取src属性

这是我的新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 = $('
').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/

是的：您可以将用户图标拖放到该框中，然后获取imgurl。 ;）

Answer 3

你走了： 工作的例子

 function drop(evt) { evt.stopPropagation(); evt.preventDefault(); var imageUrl = evt.dataTransfer.getData('text/html'); var rex = /src="?([^"\s]+)"?\s*/; var url, res; url = rex.exec(imageUrl); alert(url[1]); } 

它适用于Chrome和Firefox，但请注意，如果您将图像从Chrome拖动到Firefox，则无效。

Answer 4

这是我的小提琴： http ： //fiddle.jshell.net/ep2z5/

这适用于我的Mac上的chrome。 基本上你把html返回，然后转换成jquery对象，并且由于返回字符串是元标记和img标记，你必须取第2个元素（jquery解析返回的数组中的数字1）和jquery- ify那个项目，然后抓住src属性。

更新 ：检查Firefox，它不在那里工作，现在研究。

更新 ：好的，这是Chrome和firefox中测试的最新小提琴。 http://fiddle.jshell.net/ep2z5/6/

它使用递归，这可能是危险的，但我认为只要没有很多嵌套元素就可以正常工作。

Answer 5

   
 
Drage Folder
 
Drop Folder
 
   

创建drag-drop.js文件并添加以下代码。

 var Drag = { obj : null, init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) { o.onmousedown = Drag.start; o.hmode = bSwapHorzRef ? false : true ; o.vmode = bSwapVertRef ? false : true ; o.root = oRoot && oRoot != null ? oRoot : o ; if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px"; if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px"; if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px"; if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px"; o.minX = typeof minX != 'undefined' ? minX : null; o.minY = typeof minY != 'undefined' ? minY : null; o.maxX = typeof maxX != 'undefined' ? maxX : null; o.maxY = typeof maxY != 'undefined' ? maxY : null; o.xMapper = fXMapper ? fXMapper : null; o.yMapper = fYMapper ? fYMapper : null; o.root.onDragStart = new Function(); o.root.onDragEnd = new Function(); o.root.onDrag = new Function(); }, start : function(e) { var o = Drag.obj = this; e = Drag.fixE(e); var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); o.root.onDragStart(x, y); o.lastMouseX = e.clientX; o.lastMouseY = e.clientY; if (o.hmode) { if (o.minX != null) o.minMouseX = e.clientX - x + o.minX; if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX; } else { if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x; if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x; } if (o.vmode) { if (o.minY != null) o.minMouseY = e.clientY - y + o.minY; if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY; } else { if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y; if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y; } document.onmousemove = Drag.drag; document.onmouseup = Drag.end; return false; }, drag : function(e) { e = Drag.fixE(e); var o = Drag.obj; var ey = e.clientY; var ex = e.clientX; var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right ); var nx, ny; if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX); if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX); if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY); if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY); nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1)); ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1)); if (o.xMapper) nx = o.xMapper(y) else if (o.yMapper) ny = o.yMapper(x) Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px"; Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px"; Drag.obj.lastMouseX = ex; Drag.obj.lastMouseY = ey; Drag.obj.root.onDrag(nx, ny); return false; }, end : function() { document.onmousemove = null; document.onmouseup = null; Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"])); Drag.obj = null; }, fixE : function(e) { if (typeof e == 'undefined') e = window.event; if (typeof e.layerX == 'undefined') e.layerX = e.offsetX; if (typeof e.layerY == 'undefined') e.layerY = e.offsetY; return e; } }; 

Answer 6

仅使用Javascript就可以解决此问题。

一段代码：

 // onDrop function onDrop(evt) { evt.stopPropagation(); evt.preventDefault(); var imageUrl = evt.dataTransfer.getData("URL"); var links = getAllElementsWith("a", "href", imageUrl); var image; // console.log(links, evt); if(links.length){ image = links[0].getElementsByTagName("img"); if(image.length) imageUrl = image[0].getAttribute("src"); else imageUrl = "#no-image"; } alert(imageUrl); }; 

JSFiddle这里 ： http ： //jsfiddle.net/hayatbiralem/7pr7N/5/

感谢kevinfahy为getAllElementsWithAttribute函数。

Answer 7

向窗口添加事件侦听器以执行“拖动”事件。 将全局变量设置为事件源（IE拖动页面中的元素。）然后在“drop”中，您可以从元素中获取所需的信息。

 var dropbox = document.getElementById('dropbox'), DragElement; window.addEventListener('drag', handleClicks, false); dropbox.addEventListener('dragenter', noopHandler, false); dropbox.addEventListener('dragexit', noopHandler, false); dropbox.addEventListener('dragover', noopHandler, false); dropbox.addEventListener('drop', drop, false); function handleClicks(evt){ DragElement = evt.srcElement; } function noopHandler(evt) { evt.stopPropagation(); evt.preventDefault(); } function drop(evt) { console.log(evt); evt.stopPropagation(); evt.preventDefault(); var imageUrl = DragElement.src; alert(imageUrl); } 

http://fiddle.jshell.net/exx4e/