Question

In Javascript, I know how to set up a drag & drop target that accepts file uploads from the user’s computer. How can I set up a drop target that accepts images that are dragged from another website? All I need to know is the URL of the image that they’ve dragged.

I know this is possible, since Google Docs accepts image drops from other websites. Any idea how they’re doing it?

Answer 1

UPDATE:

It looks like there are differences between Chrome on Windows and MacOS. On Windows dataTransfer.getData('Text'); works but not on MacOS. dataTransfer.getData('URL'); should work on both.

---

OLD answer:

You could define a drop zone:

<div id="dropbox">DropZone => you could drop any image from any page here</div>

and then handle the dragenter, dragexit, dragover and drop events:

var dropbox = document.getElementById('dropbox');

dropbox.addEventListener('dragenter', noopHandler, false);
dropbox.addEventListener('dragexit', noopHandler, false);
dropbox.addEventListener('dragover', noopHandler, false);
dropbox.addEventListener('drop', drop, false);

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

​
It is inside the drop event handler that we are reading the image data from the dataTransfer object as Text. If we dropped an image from some other webpage this text will represent the url of the image.

And here’s a live demo.