Arrastrar y soltar imágenes de otro sitio web a la mina

Question

Ejecuté una búsqueda rápida de Google y SO y encontré preguntas similares, pero ninguna estaba bien formada y la mayoría eran antiguas y parecían abandonadas (sin respuestas ni comentarios durante un tiempo). Así que aquí va ...

Quiero ser capaz de recoger la url (solo la url) de una imagen que se deja caer en mi sitio desde otro sitio web ... (es decir, tengo dos ventanas cromadas abiertas. La ventana A tiene mi aplicación en él. La ventana B tiene imgur. Abro una imagen, hago clic y la arrastro a mi ventana y la dejo ir. Ahora necesito saber la url de la imagen que se colocó en mi página).

Aquí está el código con el que estaba trabajando para los archivos locales.

$(document).on('drop', function(e) { 
    var data = e.dataTransfer || e.originalEvent.dataTransfer; 
    console.log(data); // data.files is empty 
    e.preventDefault(); 
    return false; 
});​ 

Una vez más no quiero subir nada .. No estoy tratando de hacer algo de fantasía ... sólo hay que conocer la ubicación de la imagen que se dejó caer en la página desde otro sitio web.

Answer 1

Prueba esto: http://jsfiddle.net/2Jet2/70/

$(document).on('dragover', function(e) { 
    e.preventDefault(); 
}); 
$(document).on('drop', function(e) { 
    e.preventDefault(); 
    e.originalEvent.dataTransfer.items[0].getAsString(function(url){ 
     alert(url); 
    }); 
});​ 

me sale "http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342" Cuando me arrastré esa imagen desde otra ventana del navegador.

.getAsString toma una devolución de llamada que recibe el URL como argumento una vez que se llama

No funciona en Firefox

Answer 2

Se puede usar esta

$(document).bind('drop', function (e) {   
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src'); 
    if (url) { 
     jQuery('<img/>', { 
      src: url, 
      alt: "resim" 
     }).appendTo('#yourId');    
    } 
    return false; 
}) 

Answer 3

Sobre la base de la respuesta de Yunus, esto parece trabajar en FF:

e.originalEvent.dataTransfer.getData('text/html').match(/src\s*=\s*"(.+?)"/)[1]