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?
Drag and drop is a method of moving computer files or images from one place to another by clicking on them with the mouse and moving them across the screen. Copying software onto an iPod is as easy as drag and drop.
A drag and drop operation starts when the user makes a UI gesture that your app recognizes as a signal to start dragging data. In response, the app notifies the system that a drag and drop operation is starting. The system calls back to your app to get a representation of the data being dragged (a drag shadow).
The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element).
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
.
function drop(evt) { evt.stopPropagation(); evt.preventDefault(); var imageUrl = evt.dataTransfer.getData('URL'); // instead of 'Text' alert(imageUrl); }
Seems to work in Firefox, Safari, and Chrome on Mac. Also works in Firefox, IE, and Chrome in Windows.
Updated fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With