Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accept drag & drop of image from another browser window

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?

like image 851
Ben Dilts Avatar asked Aug 15 '12 16:08

Ben Dilts


People also ask

What is drag and drop?

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.

How do I drag and drop on my phone?

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).

What is a drag event?

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).


2 Answers

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.

like image 74
Darin Dimitrov Avatar answered Sep 18 '22 21:09

Darin Dimitrov


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

like image 36
zackdever Avatar answered Sep 21 '22 21:09

zackdever