<textarea>
<img>
Something that I never realized before is that text areas are drop targets by default. Using this property alone (without registering drag events on the source elements), we can emulate drag and drop behavior of non-linked images between different documents.
If you drag any of the images on the right side to the textarea you will see the url of the image in it. This works in all browsers except, as anyone could expect, in IE, which doesn't allow you to drag images to input fields.
If we take the text area from the example above, make its background transparent and put it on top of the canvas layers made in this previous experiment then we can do some interesting things with it. (Drag the corners of the images for rotating and scaling them)
Here you can see the final layer distribution, with the new layer on the top.
The easy part is getting the URL of the dragged image - just check the value of the text area. The hard part is figuring out which event will be triggered in the textarea after the image is dropped inside (especially in this case, as we also want to find out the mouse position at that moment).
Unfortunately, as is the case with so many fun browser hacks, the native event that's triggered after the drop is inconsistent across browsers. The following table shows each browser along with the event triggered:
| Browser | Event fired |
|---|---|
| IE | Not allowed |
| Firefox 2 (Win) | mouseover |
| Firefox 2 (Mac) | mouseup |
| Firefox 3 (Win) | mouseover |
| Firefox 3 (Mac) | None |
| Safari 2 | mouseup* |
| Safari 3 (Win) | mouseover*, focus* |
| Safari 3 (Mac) | mouseover*, focus* |
| Opera | mouseover |
* These events are only fired if the image and the text area are in the same document.
In order to demonstrate how the images are dragged between documents, I built a proof of concept where you can see how images are passed from two independent gadgets (iframes). (Demo).
Safari case: Everything works in Safari as long as all the elements reside in the same document. For the experiment with the gadgets (between documents) there are no events triggered in the text area. For that case, I had to take advantage of a new feature in Safari 3 which introduces native drag events by default in objects. This way I used a dragover listener in the textarea to keep track of the mouse position and then insert the image as soon as the content of the text area changes.
Firefox 3 (Mac) case: Since no event is fired at all when dropping the image, I had to use a quite complex workaround with custom events and transparent characters to find an approximation of the mouse position. These custom events though don't work when dragging between documents. In any case, I put the code as a separate patch.
IE case: I will leave it as a pendent challenge.
Update: Google Chrome: Weird behavior overall. Images can only be dropped in a small area on the top left of the text area. There's also a funny highlighting effect when dragging the images.
Update: Opera: For the demo with the gadgets, Opera outputs some errors for variables like _IG_Prefs and such. I wonder if it's matter of Google Gadgets support for Opera. I will keep testing when I have more time.
The source code is available here, which is not very long since it's extending the classes of the library made for the previous experiment.